@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/task-menu/parts/{Task.js → RawTask.js}

@@ -1,18 +1,18 @@
-import { jsxs as r, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { forwardRef as G, useEffect as P } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { Link as w, Button as z } from "react-aria-components";
+import { jsxs as n, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as O, useEffect as F } from "react";
+import { uyTv as G } from "@payfit/unity-themes";
+import { Link as P, Button as z } from "react-aria-components";
 import { useIntl as A, FormattedMessage as g } from "react-intl";
 import { useRouter as B } from "../../../providers/router/RouterProvider.js";
 import { Icon as y } from "../../icon/Icon.js";
 import { Text as k } from "../../text/Text.js";
 import { useTaskMenuContext as V } from "../TaskMenu.context.js";
 import { commonTask as D } from "./task.variants.js";
-const H = R({
+const H = G({
   extend: D,
   slots: {
     base: [],
-    element: ["uy:p-200", "uy:md:p-0"],
+    element: ["uy:p-200", "uy:md:p-0", "uy:cursor-pointer"],
     text: "uy:leading-[1]",
     lock: "uy:self-center",
     number: ""
@@ -37,10 +37,12 @@ const H = R({
       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"
+          "uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed",
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-lowest-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     },
     {
@@ -48,58 +50,60 @@ const H = R({
       taskStatus: "locked",
       className: {
         number: [
-          "uy:group-hover/element:text-content-neutral-hover",
-          "uy:group-data-[pressed]/element:bg-surface-neutral-pressed"
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover',
+          "uy:group-data-[pressed]/element:bg-surface-neutral-lowest-pressed"
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     }
   ]
-}), I = G(
+}), I = O(
   ({
-    href: s,
-    isExact: l = !1,
-    label: a,
+    href: a,
+    isExact: u = !1,
+    label: s,
     onPress: f,
     taskNumber: b,
     taskStatus: o = "uncompleted",
     children: h,
-    uniqueId: n,
-    ...u
+    uniqueId: r,
+    ...c
   }, v) => {
-    const c = B(), m = A(), {
+    const d = B(), m = A(), {
       currentTask: x,
-      setCurrentTask: d,
+      setCurrentTask: l,
       state: N,
       expandedTaskGroup: i,
       toggleTaskGroup: T
-    } = V(), S = s ? w : z;
-    P(() => {
-      s && c?.isActive(s.toString(), l) && d?.({ uniqueId: n, label: a });
-    }, [s, l, c, a, n]);
-    const t = x?.uniqueId === n, M = Object.assign(
+    } = V(), S = a ? P : z;
+    F(() => {
+      a && d?.isActive(a.toString(), u) && l?.({ uniqueId: r, label: s });
+    }, [a, u, d, s, r, l]);
+    const t = x?.uniqueId === r, M = Object.assign(
       {},
       t !== void 0 && {
         "data-current": t,
         "aria-current": t ? "page" : void 0
       }
-    ), { base: C, number: L, element: j, text: E, lock: O } = H({
+    ), { base: w, number: C, element: L, text: R, lock: j } = H({
       isSelected: t,
       taskStatus: o
     });
-    return /* @__PURE__ */ r("li", { ref: v, className: C(), ...u, children: [
-      /* @__PURE__ */ r(
+    return /* @__PURE__ */ n("li", { ref: v, className: w(), ...c, children: [
+      /* @__PURE__ */ n(
         S,
         {
-          className: j(),
-          href: s,
-          onPress: (F) => {
-            d?.({ uniqueId: n, label: a }), N?.toggle(), i && T?.(i), f?.(F);
+          className: L(),
+          href: a,
+          onPress: (E) => {
+            l?.({ uniqueId: r, label: s }), N?.toggle(), i && T?.(i), f?.(E);
           },
           ...M,
-          ...u,
+          ...c,
           children: [
-            /* @__PURE__ */ e("div", { className: L(), children: o === "completed" ? /* @__PURE__ */ r(p, { children: [
+            /* @__PURE__ */ e("div", { className: C(), children: o === "completed" ? /* @__PURE__ */ n(p, { children: [
               /* @__PURE__ */ e(
                 y,
                 {
@@ -132,17 +136,17 @@ const H = R({
               k,
               {
                 asElement: "span",
-                className: E(),
+                className: R(),
                 variant: t ? "bodyStrong" : "body",
-                children: a
+                children: s
               }
             ),
-            o === "locked" && /* @__PURE__ */ r(p, { children: [
+            o === "locked" && /* @__PURE__ */ n(p, { children: [
               /* @__PURE__ */ e(
                 y,
                 {
                   "aria-hidden": "true",
-                  className: O(),
+                  className: j(),
                   src: "LockOutlined",
                   alt: m.formatMessage({
                     id: "unity:component:task-menu:task:lock:label",
@@ -165,8 +169,8 @@ const H = R({
     ] });
   }
 );
-I.displayName = "Task";
+I.displayName = "RawTask";
 export {
-  I as Task,
-  H as task
+  I as RawTask,
+  H as rawTask
 };

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { DataAttributes } from '../../../types/DataAttributes.js';
-import { SubTaskProps } from './SubTask.js';
-import { TaskProps } from './Task.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.
@@ -19,9 +19,9 @@ export interface TaskGroupProps extends Omit<TaskProps, 'href' | 'isExact' | 'is
  *   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" />
+ *   <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

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

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as j, Children as i, isValidElement as u, cloneElement as A } from "react";
+import { forwardRef as j, Children as i, isValidElement as o, cloneElement as A } from "react";
 import { uyTv as V } from "@payfit/unity-themes";
 import { useId as $ } from "react-aria";
 import { Button as B } from "react-aria-components";
@@ -12,9 +12,9 @@ const P = V({
   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"],
+    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-lowest uy:w-300 uy:z-[0] uy:rounded-200 uy:my-250",
+      "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: [
@@ -23,7 +23,7 @@ const P = V({
     containerSubTasksWrapper: [
       "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none"
     ],
-    number: ""
+    number: "uy:bg-surface-neutral-lowest"
   },
   variants: {
     expanded: {
@@ -55,9 +55,11 @@ const P = V({
       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"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-lowest-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed'
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     },
     {
@@ -65,39 +67,41 @@ const P = V({
       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"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover uy:group-data-[pressed=true]/element:bg-surface-neutral-pressed'
         ],
-        text: ["uy:group-hover/element:text-content-neutral-hover"]
+        text: [
+          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
+        ]
       }
     }
   ]
 }), R = (e, t) => e ? i.toArray(t).some(
-  (s) => u(s) && s.props.uniqueId === e
+  (s) => o(s) && s.props.uniqueId === e
 ) : !1, U = (e) => e ? i.toArray(e).find(
-  (t) => u(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
+  (t) => o(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
 ) : null, J = j(
   ({
     children: e,
     label: t,
     taskNumber: s,
-    taskStatus: m = "uncompleted",
-    uniqueId: c,
+    taskStatus: d = "uncompleted",
+    uniqueId: m,
     ...g
   }, k) => {
-    const { currentTask: v, setCurrentTask: x, toggleTaskGroup: S, expandedTaskGroup: h } = H(), d = $(), T = D(), a = h === c, N = (n) => {
-      if (S?.(c), !n) {
+    const { currentTask: v, setCurrentTask: x, toggleTaskGroup: S, expandedTaskGroup: h } = H(), c = $(), T = D(), a = h === m, N = (u) => {
+      if (S?.(m), !u) {
         const b = U(e);
-        if (u(b)) {
+        if (o(b)) {
           const { uniqueId: M, label: W } = b.props;
           x?.({ uniqueId: M, label: W });
         }
       }
-    }, I = i.map(e, (n) => u(n) ? A(n, { isDisabled: !a }) : n), p = `${d}-toggle`, y = `${d}-content`, o = R(
+    }, w = i.map(e, (u) => o(u) ? A(u, { isDisabled: !a }) : u), p = `${c}-toggle`, y = `${c}-content`, n = R(
       v?.uniqueId,
       e
-    ), { base: w, number: C, text: E, bar: G, element: z, containerSubTasks: q } = P({
-      taskStatus: m,
-      hasSelectedSubTask: o,
+    ), { base: I, number: C, text: E, bar: G, element: z, containerSubTasks: q } = P({
+      taskStatus: d,
+      hasSelectedSubTask: n,
       expanded: a
     });
     return /* @__PURE__ */ l(
@@ -105,8 +109,8 @@ const P = V({
       {
         ref: k,
         "data-group": "true",
-        "data-active-group": o,
-        className: w(),
+        "data-active-group": n,
+        className: I(),
         children: [
           /* @__PURE__ */ l(
             B,
@@ -120,7 +124,7 @@ const P = V({
               "aria-controls": y,
               ...g,
               children: [
-                /* @__PURE__ */ r("div", { className: C(), children: m === "completed" ? /* @__PURE__ */ r(
+                /* @__PURE__ */ r("div", { className: C(), children: d === "completed" ? /* @__PURE__ */ r(
                   F,
                   {
                     size: 24,
@@ -134,7 +138,7 @@ const P = V({
                   f,
                   {
                     asElement: "span",
-                    variant: o ? "bodyStrong" : "body",
+                    variant: n ? "bodyStrong" : "body",
                     className: "uy:leading-[1]",
                     children: s
                   }
@@ -144,7 +148,7 @@ const P = V({
                   {
                     asElement: "span",
                     className: E(),
-                    variant: o ? "bodyStrong" : "body",
+                    variant: n ? "bodyStrong" : "body",
                     children: t
                   }
                 )
@@ -159,10 +163,10 @@ const P = V({
                 "aria-labelledby": p,
                 "aria-hidden": !a,
                 className: q(),
-                children: I
+                children: w
               }
             ),
-            /* @__PURE__ */ r("div", { role: "presentation", className: G() })
+            a && /* @__PURE__ */ r("div", { role: "presentation", className: G() })
           ] })
         ]
       }

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

@@ -8,7 +8,7 @@ const u = e({
     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"
+      'uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]: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",
@@ -24,6 +24,8 @@ const u = e({
         element: ["uy:data-[pressed]:text-content-neutral-pressed"],
         number: [
           "uy:bg-surface-neutral-lowest",
+          "uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed",
+          "uy:group-hover/element:bg-surface-neutral-lowest-hover uy:group-hover/element:text-content-neutral-hover",
           'uy:group-data-[current="true"]/element:bg-surface-primary-active uy:group-data-[current="true"]/element:text-content-inverted-active'
         ],
         text: [
@@ -39,7 +41,7 @@ const u = e({
         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"
+          "uy:group-data-[pressed=true]/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",

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

@@ -1,7 +1,7 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { HTMLAttributes, PropsWithChildren } from 'react';
 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 ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'displayHeading' | '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.
@@ -38,6 +38,11 @@ export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
      * @default undefined
      */
     className?: string;
+    /**
+     * Limits the visible width of the text to a given number of characters using the CSS `ch` unit.
+     * @default undefined
+     */
+    maxWidthCh?: number;
 }>;
 /**
  * The `Text` component is used to render text with different variants and colors.
@@ -78,6 +83,11 @@ declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default undefined
      */
     className?: string;
+    /**
+     * Limits the visible width of the text to a given number of characters using the CSS `ch` unit.
+     * @default undefined
+     */
+    maxWidthCh?: number;
 } & {
     children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLElement>>;

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

@@ -1,8 +1,9 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { text as h } from "./Text.variants.js";
-const y = {
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as g } from "react";
+import { text as b } from "./Text.variants.js";
+const N = {
   inherit: "span",
+  displayHeading: "h1",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -21,38 +22,50 @@ const y = {
   actionLarge: "span",
   actionSmall: "span",
   actionInfo: "span"
-}, g = c(
+}, S = h(
   ({
-    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,
+    children: r,
+    variant: t,
+    color: s,
+    isTruncated: n,
+    lineClamp: e,
+    asElement: l,
+    className: a,
+    maxWidthCh: o,
+    ...d
+  }, m) => {
+    const i = e !== void 0, p = g(
+      () => b({
+        variant: t,
+        color: s,
+        isTruncated: n,
+        isLineClamped: i,
+        className: a,
+        hasCharLimit: o !== void 0
+      }),
+      [a, s, i, n, t, o]
+    ), y = N[t ?? "inherit"];
+    return /* @__PURE__ */ c(
+      l ?? y,
       {
         "data-dd-privacy": "mask",
-        ...l,
-        ref: i,
-        className: m,
-        style: { "--uy-text-line-clamp": t },
-        children: e
+        ...d,
+        ref: m,
+        className: p,
+        style: {
+          ...e !== void 0 && {
+            "--uy-text-line-clamp": e
+          },
+          ...o !== void 0 && {
+            "--uy-text-max-width-ch": `${o}ch`
+          }
+        },
+        children: r
       }
     );
   }
 );
-g.displayName = "Text";
+S.displayName = "Text";
 export {
-  g as Text
+  S as Text
 };

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

@@ -1,6 +1,7 @@
 export declare const text: import('tailwind-variants').TVReturnType<{
     variant: {
         inherit: string;
+        displayHeading: string;
         h1: string;
         h2: string;
         h3: string;
@@ -95,9 +96,13 @@ export declare const text: import('tailwind-variants').TVReturnType<{
     isLineClamped: {
         true: string;
     };
+    hasCharLimit: {
+        true: string;
+    };
 }, undefined, "", {
     variant: {
         inherit: string;
+        displayHeading: string;
         h1: string;
         h2: string;
         h3: string;
@@ -192,9 +197,13 @@ export declare const text: import('tailwind-variants').TVReturnType<{
     isLineClamped: {
         true: string;
     };
+    hasCharLimit: {
+        true: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
         inherit: string;
+        displayHeading: string;
         h1: string;
         h2: string;
         h3: string;
@@ -289,4 +298,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
     isLineClamped: {
         true: string;
     };
+    hasCharLimit: {
+        true: string;
+    };
 }, undefined, "", unknown, unknown, undefined>>;

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

@@ -4,6 +4,7 @@ const n = t({
   variants: {
     variant: {
       inherit: "",
+      displayHeading: "uy:typography-display-heading",
       h1: "uy:typography-h1",
       h2: "uy:typography-h2",
       h3: "uy:typography-h3",
@@ -97,6 +98,9 @@ const n = t({
     },
     isLineClamped: {
       true: "uy:line-clamp-[var(--uy-text-line-clamp)]"
+    },
+    hasCharLimit: {
+      true: "uy:inline-block uy:max-w-[var(--uy-text-max-width-ch)] uy:truncate"
     }
   },
   defaultVariants: {

package/dist/esm/components/text-area/TanstackTextArea.d.ts

@@ -0,0 +1,21 @@
+import { TextAreaProps } from './TextArea.js';
+export type TanstackTextAreaProps = Omit<TextAreaProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackTextArea` is a controlled textarea wired to the TanStack Form field context.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ bio: string }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="bio">
+ *         {() => <TanstackTextArea placeholder="Short bio" rows={4} />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackTextArea: import('react').ForwardRefExoticComponent<TanstackTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { TanstackTextArea };

package/dist/esm/components/text-area/TanstackTextArea.js

@@ -0,0 +1,35 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as x } from "../form-field/TanstackFormField.context.js";
+import { TextArea as p } from "./TextArea.js";
+const T = u(
+  ({ onChange: i, onBlur: o, isReadOnly: l, isDisabled: d, ...n }, s) => {
+    const e = f(), a = x(), m = e.state.meta.isTouched && !e.state.meta.isValid, r = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c(
+      p,
+      {
+        ...n,
+        ref: s,
+        id: a.inputId,
+        value: e.state.value,
+        onChange: (t) => {
+          e.handleChange(t.target.value), i?.(t);
+        },
+        onBlur: (t) => {
+          e.handleBlur(), o?.(t);
+        },
+        isReadOnly: l,
+        isDisabled: d,
+        isInvalid: m,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": r.length > 0 ? r : void 0,
+        "aria-details": a.contextualLinkId
+      }
+    );
+  }
+);
+T.displayName = "TanstackTextArea";
+export {
+  T as TanstackTextArea
+};