@payfit/unity-components 1.1.0 → 1.2.0

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

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

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

@@ -1,5 +1,5 @@
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import s, { useState as G, useCallback as j } from "react";
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import r, { 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";
@@ -32,40 +32,40 @@ const z = B({
 function H({
   children: y,
   label: p,
-  prefix: i,
+  prefix: s,
   suffix: m,
   defaultExpanded: f = !1,
   isExpanded: l,
-  onToggle: n,
+  onToggle: i,
   ...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,
+  const u = _(), [h, b] = G(f), a = l !== void 0, e = a ? l : h, v = j(() => {
+    a || b((t) => !t), i?.(!e);
+  }, [a, e, i]), g = r.Children.map(y, (t) => r.isValidElement(t) ? r.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
+    base: N,
+    prefix: I,
+    label: E,
+    suffix: S,
     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(
+  return /* @__PURE__ */ o("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ o(
       D,
       {
         id: c,
-        className: I({ className: "uy:w-full" }),
+        className: N({ 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: [
+          s && /* @__PURE__ */ n("span", { className: I(), children: s({ isExpanded: e }) }),
+          /* @__PURE__ */ n("span", { className: E(), children: p }),
+          /* @__PURE__ */ o("span", { className: S(), role: "presentation", children: [
             m,
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ n(
               $,
               {
                 src: "CaretDownOutlined",
@@ -79,19 +79,19 @@ function H({
         ]
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ n(
       "div",
       {
         className: C(),
         style: { maxHeight: e ? 1e3 : 0 },
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ n(
           "ul",
           {
             id: d,
             className: w(),
             "aria-labelledby": c,
             "aria-hidden": !e,
-            children: N
+            children: g
           }
         )
       }

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

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 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';
@@ -17,7 +17,7 @@ export interface NumberFieldProps<TFieldValues extends FieldValues = FieldValues
     /** A contextual link to display below the text field. */
     contextualLink?: ReactNode;
 }
-type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<ZodInfer<TSchema>> & {
+type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLInputElement>;
 }) => JSX.Element) & {
     displayName?: string;
@@ -39,7 +39,7 @@ type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<Zo
  * />
  * ```
  * @template TSchema - The Zod schema type for form validation
- * @param {NumberFieldProps<ZodInfer<TSchema>>} props - The props for the NumberField component
+ * @param {NumberFieldProps<StandardSchemaV1.InferOutput<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
  */

package/dist/esm/components/number-input/NumberInput.js

@@ -1,32 +1,32 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { forwardRef as G } from "react";
-import { uyTv as T } from "@payfit/unity-themes";
-import { NumberField as W, Group as q, Input as A } from "react-aria-components";
-import { Icon as C } from "../icon/Icon.js";
+import { forwardRef as k } from "react";
+import { uyTv as z } from "@payfit/unity-themes";
+import { NumberField as F, Group as G, Input as T } from "react-aria-components";
+import { Icon as W } from "../icon/Icon.js";
 import "@payfit/unity-icons";
-import { useIntl as H } from "react-intl";
-import { CircularIconButton as s } from "../icon-button/CircularIconButton.js";
-import { Spinner as J } from "../spinner/Spinner.js";
-const K = T({
+import { useIntl as q } from "react-intl";
+import { CircularIconButton as i } from "../icon-button/CircularIconButton.js";
+import { Spinner as A } from "../spinner/Spinner.js";
+const H = z({
   slots: {
     base: [
-      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100",
+      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75",
       "uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
       "uy:active:border-border-form-active"
     ],
     wrapper: [
-      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:max-w-full uy:justify-between uy:items-center"
+      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:max-w-full uy:justify-between uy:items-center"
     ],
     input: [
       "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:min-w-0 uy:max-w-full",
       "uy:placeholder:text-content-neutral-lowest"
     ],
     prefix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100",
+      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-75",
       "uy:active:border-border-form-active"
     ],
     suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100",
+      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75",
       "uy:active:border-border-form-active"
     ],
     state: [
@@ -81,62 +81,62 @@ const K = T({
       }
     }
   }
-}), Q = G(
+}), J = k(
   ({
-    withControls: b = !1,
+    withControls: s = !1,
     defaultValue: u,
-    formatOptions: g,
-    isDisabled: f,
-    isInvalid: y,
+    formatOptions: p,
+    isDisabled: b,
+    isInvalid: f,
     isLoading: a,
     isReadOnly: d,
-    isRequired: x,
+    isRequired: g,
     maxValue: n,
-    minValue: i,
-    prefix: m,
-    onBlur: w,
-    onChange: v,
-    onClearButtonPress: l,
+    minValue: l,
+    prefix: y,
+    onBlur: x,
+    onChange: w,
+    onClearButtonPress: v,
     step: h,
-    suffix: c,
+    suffix: m,
     value: r,
     ...N
-  }, p) => {
+  }, c) => {
     const {
       base: M,
       wrapper: I,
-      input: j,
-      prefix: E,
-      suffix: O,
-      state: S,
-      controls: D
-    } = K({ isReadOnly: d }), o = H(), k = r !== void 0 && !isNaN(r), z = u !== void 0 && !isNaN(u), F = (k || z) && !b && !a && !d && !f;
+      input: C,
+      prefix: j,
+      suffix: E,
+      state: O,
+      controls: S
+    } = H({ isReadOnly: d }), o = q(), B = r !== void 0 && !isNaN(r), D = u !== void 0 && !isNaN(u), P = (B || D) && !s && !a && !d && !b;
     return /* @__PURE__ */ t(
-      W,
+      F,
       {
-        ref: p,
+        ref: c,
         className: M(),
         value: r,
         defaultValue: u,
-        minValue: i,
+        minValue: l,
         maxValue: n,
         step: h,
-        isDisabled: f,
+        isDisabled: b,
         isReadOnly: d,
-        isInvalid: y,
-        isRequired: x,
+        isInvalid: f,
+        isRequired: g,
         "aria-busy": a,
-        onChange: v,
-        formatOptions: g,
-        onBlur: w,
+        onChange: w,
+        formatOptions: p,
+        onBlur: x,
         ...N,
         children: [
-          m ? /* @__PURE__ */ e("span", { className: E(), children: m }) : null,
-          /* @__PURE__ */ t(q, { className: I(), children: [
-            /* @__PURE__ */ e(A, { ref: p, className: j() }),
-            /* @__PURE__ */ t("div", { className: S(), children: [
+          y ? /* @__PURE__ */ e("span", { className: j(), children: y }) : null,
+          /* @__PURE__ */ t(G, { className: I(), children: [
+            /* @__PURE__ */ e(T, { ref: c, className: C() }),
+            /* @__PURE__ */ t("div", { className: O(), children: [
               a && /* @__PURE__ */ e(
-                J,
+                A,
                 {
                   color: "inherit",
                   size: "small",
@@ -146,8 +146,8 @@ const K = T({
                   })
                 }
               ),
-              y && /* @__PURE__ */ e(
-                C,
+              f && /* @__PURE__ */ e(
+                W,
                 {
                   src: "WarningCircleOutlined",
                   color: "content.form.invalid",
@@ -157,8 +157,8 @@ const K = T({
                   })
                 }
               ),
-              F && /* @__PURE__ */ e(
-                s,
+              P && /* @__PURE__ */ e(
+                i,
                 {
                   title: o.formatMessage({
                     id: "unity:component:common:clear:title",
@@ -167,19 +167,19 @@ const K = T({
                   className: "uy:text-content-neutral-enabled",
                   icon: "CloseOutlined",
                   onPress: () => {
-                    l == null || l();
+                    v?.();
                   }
                 }
               )
             ] }),
-            b && /* @__PURE__ */ t("div", { className: D(), children: [
+            s && /* @__PURE__ */ t("div", { className: S(), children: [
               /* @__PURE__ */ e(
-                s,
+                i,
                 {
                   asElement: "button",
                   icon: "MinusOutlined",
                   slot: "decrement",
-                  isDisabled: i !== void 0 && r === i,
+                  isDisabled: l !== void 0 && r === l,
                   title: o.formatMessage({
                     id: "unity:component:form-field:number-input:decrement:title",
                     defaultMessage: "decrement"
@@ -187,7 +187,7 @@ const K = T({
                 }
               ),
               /* @__PURE__ */ e(
-                s,
+                i,
                 {
                   asElement: "button",
                   icon: "PlusOutlined",
@@ -201,14 +201,14 @@ const K = T({
               )
             ] })
           ] }),
-          c ? /* @__PURE__ */ e("span", { className: O(), children: c }) : null
+          m ? /* @__PURE__ */ e("span", { className: E(), children: m }) : null
         ]
       }
     );
   }
 );
-Q.displayName = "NumberInput";
+J.displayName = "NumberInput";
 export {
-  Q as NumberInput,
-  K as numberInput
+  J as NumberInput,
+  H as numberInput
 };