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

package/dist/esm/components/multi-select-field/MultiSelectField.js

@@ -0,0 +1,82 @@
+import { jsxs as M, jsx as t } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { uyTv as P } from "@payfit/unity-themes";
+import { useFormContext as g } from "react-hook-form";
+import { FormField as L } from "../form-field/FormField.js";
+import { FormControl as R } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as k } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as q } from "../form-field/parts/FormLabel.js";
+import { MultiSelect as u } from "../multi-select/MultiSelect.js";
+const v = P({
+  base: "uy:flex uy:flex-col uy:gap-100"
+});
+function w(e, i) {
+  const { control: l, setValue: f } = g(), {
+    name: o,
+    label: x,
+    helperText: n,
+    feedbackText: F,
+    contextualLink: h,
+    isRequired: p,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s,
+    requiredVariant: S,
+    children: a,
+    onClearButtonPress: r,
+    ...y
+  } = e, I = {
+    isRequired: p,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s
+  }, V = "items" in e && "getItemValue" in e, d = {
+    onClearButtonPress: () => {
+      f(o, /* @__PURE__ */ new Set()), r == null || r();
+    },
+    placeholder: e.placeholder,
+    isSearchable: e.isSearchable,
+    maxVisibleItems: e.maxVisibleItems,
+    isDisabled: c,
+    isReadOnly: s,
+    isLoading: m,
+    renderValue: e.renderValue
+  };
+  return /* @__PURE__ */ M(
+    L,
+    {
+      control: l,
+      name: o,
+      className: v(),
+      ...I,
+      children: [
+        /* @__PURE__ */ t(q, { requiredVariant: S, children: x }),
+        n && /* @__PURE__ */ t(k, { children: n }),
+        /* @__PURE__ */ t(R, { children: V ? (
+          // @ts-expect-error - Type system cannot fully express this but it works correctly at runtime
+          /* @__PURE__ */ t(
+            u,
+            {
+              ...y,
+              ...d,
+              ref: i,
+              children: a
+            }
+          )
+        ) : /* @__PURE__ */ t(u, { ...d, ref: i, children: a }) }),
+        /* @__PURE__ */ t(j, { children: F }),
+        h
+      ]
+    }
+  );
+}
+const C = T(function(i, l) {
+  return w(i, l);
+});
+C.displayName = "MultiSelectField";
+export {
+  C as MultiSelectField
+};

package/dist/esm/components/nav/Nav.js

@@ -0,0 +1,28 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import n from "../../hooks/use-id.js";
+function o({ children: e, title: y, ...s }) {
+  const l = `nav-title-${n()}`;
+  return /* @__PURE__ */ u(
+    "nav",
+    {
+      ...s,
+      className: "uy:flex uy:flex-col uy:gap-50 uy:min-w-[264px]",
+      "aria-labelledby": l,
+      children: [
+        /* @__PURE__ */ a(
+          "h3",
+          {
+            id: l,
+            className: "uy:typography-body-strong uy:py-100 uy:px-150",
+            children: y
+          }
+        ),
+        /* @__PURE__ */ a("ul", { className: "uy:flex uy:flex-col uy:gap-50 uy:list-none", children: e })
+      ]
+    }
+  );
+}
+o.displayName = "Nav";
+export {
+  o as Nav
+};

package/dist/esm/components/nav/parts/NavGroup.js

@@ -0,0 +1,104 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import s, { useState as G, useCallback as j } from "react";
+import { uyTv as B } from "@payfit/unity-themes";
+import { Button as D } from "react-aria-components";
+import _ from "../../../hooks/use-id.js";
+import { Icon as $ } from "../../icon/Icon.js";
+import { navItemBase as k } from "./NavItem.js";
+const z = B({
+  extend: k,
+  slots: {
+    caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
+    contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
+    content: "uy:list-none uy:flex uy:flex-col uy:gap-50 uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear"
+  },
+  variants: {
+    expanded: {
+      true: {
+        caret: "uy:rotate-180",
+        contentWrapper: "uy:max-h-[1000px] uy:overflow-visible",
+        label: "uy:typography-body-strong",
+        content: "uy:opacity-100 uy:visible"
+      },
+      false: {
+        caret: "uy:rotate-0",
+        contentWrapper: "uy:max-h-0 uy:overflow-hidden",
+        content: "uy:opacity-0 uy:invisible uy:pointer-events-none",
+        label: "uy:typography-body"
+      }
+    }
+  }
+});
+function H({
+  children: y,
+  label: p,
+  prefix: i,
+  suffix: m,
+  defaultExpanded: f = !1,
+  isExpanded: l,
+  onToggle: n,
+  ...x
+}) {
+  const u = _(), [h, b] = G(f), o = l !== void 0, e = o ? l : h, v = j(() => {
+    o || b((t) => !t), n == null || n(!e);
+  }, [o, e, n]), N = s.Children.map(y, (t) => s.isValidElement(t) ? s.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
+    base: I,
+    prefix: E,
+    label: S,
+    suffix: g,
+    content: w,
+    contentWrapper: C,
+    caret: W
+  } = z({ level: 0, expanded: e });
+  return /* @__PURE__ */ r("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ r(
+      D,
+      {
+        id: c,
+        className: I({ className: "uy:w-full" }),
+        onPress: v,
+        "aria-expanded": e,
+        "aria-controls": d,
+        ...x,
+        children: [
+          i && /* @__PURE__ */ a("span", { className: E(), children: i({ isExpanded: e }) }),
+          /* @__PURE__ */ a("span", { className: S(), children: p }),
+          /* @__PURE__ */ r("span", { className: g(), role: "presentation", children: [
+            m,
+            /* @__PURE__ */ a(
+              $,
+              {
+                src: "CaretDownOutlined",
+                alt: "expand group",
+                size: 20,
+                className: W(),
+                color: "inherit"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: C(),
+        style: { maxHeight: e ? 1e3 : 0 },
+        children: /* @__PURE__ */ a(
+          "ul",
+          {
+            id: d,
+            className: w(),
+            "aria-labelledby": c,
+            "aria-hidden": !e,
+            children: N
+          }
+        )
+      }
+    )
+  ] });
+}
+H.displayName = "NavGroup";
+export {
+  H as NavGroup
+};

package/dist/esm/components/nav/parts/NavItem.d.ts

@@ -0,0 +1,164 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren, ReactNode } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+export declare const navItemBase: import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, unknown, unknown, undefined>>;
+declare const navItem: import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+    };
+}, undefined, undefined, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, unknown, unknown, undefined>>>;
+export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWithChildren<{
+    /** The prefix element to be displayed before the label. */
+    prefix?: ({ isCurrent }: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label. */
+    suffix?: ReactNode;
+    /** 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 URL to navigate to when the nav item is clicked. Use it when the item should trigger a navigation to another page */
+    href?: string;
+    /** Whether the nav item is currently active. */
+    isCurrent?: boolean;
+    /** Whether the nav item is disabled. */
+    isDisabled?: boolean;
+    /** Whether the nav item should exactly match the route's path. */
+    isExact?: boolean;
+}> & DataAttributes;
+/**
+ * The `NavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
+ */
+export declare function NavItem({ children, level, prefix, suffix, onPress, href, isCurrent, isDisabled, isExact, ...dataAttributes }: NavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavItem {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/nav/parts/NavItem.js

@@ -0,0 +1,95 @@
+import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import { uyTv as y, uyMerge as N } from "@payfit/unity-themes";
+import { Link as w, Button as I } from "react-aria-components";
+import { useRouter as j } from "../../../providers/router/RouterProvider.js";
+const A = y({
+  slots: {
+    base: [
+      "uy:group uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:rounded-75 uy:outline-0 uy:transition-all",
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-active uy:data-[pressed]:bg-surface-neutral-pressed",
+      "uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
+    ],
+    prefix: "uy:p-25 uy:empty:hidden uy:text-content-neutral-low",
+    suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
+    label: [
+      "uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"
+    ]
+  },
+  variants: {
+    level: {
+      0: "uy:pl-150",
+      1: "uy:pl-600"
+    },
+    isDisabled: {
+      true: {
+        base: "uy:pointer-events-none",
+        label: "uy:text-content-neutral-disabled"
+      },
+      false: ""
+    }
+  }
+}), S = y({
+  extend: A,
+  variants: {
+    isActive: {
+      true: {
+        base: "uy:bg-surface-neutral-active",
+        prefix: "uy:text-content-neutral",
+        label: "uy:typography-body-strong"
+      },
+      false: {
+        base: "",
+        prefix: "uy:text-content-neutral-low",
+        label: "uy:typography-body"
+      }
+    }
+  }
+});
+function k({
+  children: o,
+  level: s = 0,
+  prefix: n,
+  suffix: r,
+  onPress: c,
+  href: e,
+  isCurrent: p,
+  isDisabled: a = !1,
+  isExact: f = !1,
+  ...d
+}) {
+  const i = j(), b = e ? w : I, t = i && e ? i.isActive(e.toString(), f) : p, {
+    base: v,
+    label: l,
+    prefix: g,
+    suffix: m
+  } = S({ level: s, isActive: t, isDisabled: a }), x = Object.assign(
+    {},
+    t !== void 0 && {
+      "data-current": t,
+      "aria-current": t ? "page" : void 0
+    },
+    !e && { tabIndex: a ? -1 : void 0 }
+  );
+  return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
+    b,
+    {
+      className: N(v(), l()),
+      href: e,
+      onPress: c,
+      isDisabled: a,
+      "data-level": s,
+      ...x,
+      ...d,
+      children: [
+        n && /* @__PURE__ */ u("span", { className: g(), children: n({ isCurrent: t ?? !1 }) }),
+        /* @__PURE__ */ u("span", { className: l(), children: o }),
+        r && /* @__PURE__ */ u("span", { className: m(), children: r })
+      ]
+    }
+  ) });
+}
+k.displayName = "NavItem";
+export {
+  k as NavItem,
+  A as navItemBase
+};

package/dist/esm/components/number-field/NumberField.d.ts

@@ -0,0 +1,47 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+import { NumberProps } from '../number-input/NumberInput.js';
+export declare const numberField: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-100", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-100", unknown, unknown, undefined>>;
+export interface NumberFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<NumberProps, 'name'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the text field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+}
+type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * NumberField is a form control component that combines a number input with form field functionality.
+ * It integrates with React Hook Form and provides features like validation, labels, helper text, and feedback.
+ * @template TFieldValues - The type of the form values
+ * @template TName - The type of the field name (must be a key of TFieldValues)
+ * @example
+ * ```tsx
+ * import { NumberField } from '@payfit/unity-components'
+ *
+ * <NumberField
+ *   name="age"
+ *   label="Age"
+ *   helperText="Enter your age in years"
+ *   isRequired
+ * />
+ * ```
+ * @template TSchema - The Zod schema type for form validation
+ * @param {NumberFieldProps<ZodInfer<TSchema>>} props - The props for the NumberField component
+ * @param {ForwardedRef<HTMLInputElement>} ref - Ref forwarded to the underlying input element
+ * @returns {JSX.Element} A NumberField component
+ */
+declare const NumberField: NumberFieldComponent;
+export { NumberField };

package/dist/esm/components/number-field/NumberField.js

@@ -0,0 +1,71 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { uyTv as I } from "@payfit/unity-themes";
+import { useFormContext as T } from "react-hook-form";
+import { FormField as j } from "../form-field/FormField.js";
+import { FormControl as B } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as P } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as g } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as k } from "../form-field/parts/FormLabel.js";
+import { NumberInput as v } from "../number-input/NumberInput.js";
+const w = I({
+  base: "uy:flex uy:flex-col uy:gap-100"
+});
+function H({
+  name: o,
+  label: e,
+  defaultValue: t,
+  helperText: m,
+  feedbackText: n,
+  contextualLink: i,
+  isRequired: l,
+  isInvalid: s,
+  isLoading: u,
+  isDisabled: c,
+  isReadOnly: p,
+  requiredVariant: f,
+  onClearButtonPress: d,
+  ...a
+}, F) {
+  const { control: b, setValue: x } = T(), N = {
+    isRequired: l,
+    isInvalid: s,
+    isLoading: u,
+    isDisabled: c,
+    isReadOnly: p
+  }, y = d ?? (() => {
+    x(o, NaN);
+  });
+  return /* @__PURE__ */ h(
+    j,
+    {
+      control: b,
+      name: o,
+      className: w(),
+      ...N,
+      children: [
+        /* @__PURE__ */ r(k, { requiredVariant: f, children: e }),
+        m && /* @__PURE__ */ r(g, { children: m }),
+        /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(
+          v,
+          {
+            ref: F,
+            onClearButtonPress: y,
+            defaultValue: t,
+            ...a
+          }
+        ) }),
+        /* @__PURE__ */ r(P, { children: n }),
+        i
+      ]
+    }
+  );
+}
+const L = C(function(e, t) {
+  return H(e, t);
+});
+L.displayName = "NumberField";
+export {
+  L as NumberField,
+  w as numberField
+};