@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupEditView.js

@@ -1,56 +0,0 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { useContext as g } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { useIntl as x } from "react-intl";
-import { Button as v } from "../../button/Button.js";
-import { InlineFieldGroupContext as I } from "../InlineFieldGroup.context.js";
-const N = w({
-  slots: {
-    fieldset: "uy:border-0 uy:p-0 uy:m-0",
-    legend: "uy:sr-only",
-    fieldsContainer: "uy:flex uy:flex-col uy:gap-250",
-    hiddenButtons: "uy:sr-only"
-  }
-});
-function b({
-  children: d,
-  className: s,
-  legend: o
-}) {
-  const l = x(), t = g(I);
-  if (!t)
-    throw new Error(
-      "InlineFieldGroupEditView must be used within InlineFieldGroup"
-    );
-  const { mode: r, editViewId: a, isLoading: n, editViewRef: u } = t, i = r === "edit", {
-    fieldset: m,
-    legend: f,
-    fieldsContainer: c,
-    hiddenButtons: p
-  } = N(), y = l.formatMessage({
-    id: "unity:component:inline-field-group:save",
-    defaultMessage: "Save"
-  });
-  return /* @__PURE__ */ h(
-    "fieldset",
-    {
-      ref: u,
-      id: a,
-      className: m({ className: s }),
-      disabled: n,
-      hidden: !i,
-      "aria-hidden": !i,
-      "aria-busy": n,
-      ...!i && { inert: "" },
-      children: [
-        /* @__PURE__ */ e("legend", { className: f(), children: o }),
-        /* @__PURE__ */ e("div", { className: c(), children: d }),
-        /* @__PURE__ */ e("div", { className: p(), children: /* @__PURE__ */ e(v, { type: "submit", variant: "primary", children: y }) })
-      ]
-    }
-  );
-}
-b.displayName = "InlineFieldGroupEditView";
-export {
-  b as InlineFieldGroupEditView
-};

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.d.ts

@@ -1,71 +0,0 @@
-import { ReactNode } from 'react';
-export interface InlineFieldGroupHeaderProps {
-    /**
-     * The title to display in the header.
-     * This will be used for aria-labelledby on the form element.
-     */
-    title: ReactNode;
-    /**
-     * Optional subtitle to display below the title.
-     */
-    subtitle?: ReactNode;
-    /**
-     * Additional custom actions to render alongside the default buttons.
-     * These will be displayed between the title and the edit/save/cancel buttons.
-     */
-    customActions?: ReactNode;
-}
-/**
- * InlineFieldGroupHeader renders the title and contextual action buttons for an InlineFieldGroup.
- * It automatically switches between Edit button (read mode) and Save/Cancel buttons (edit mode)
- * based on the parent InlineFieldGroup's current mode.
- * The Save button integrates with TanStack Form and remains disabled until the form has changes.
- * Cancel resets the form and returns to read mode.
- * @example Basic usage
- * ```tsx
- * import { useTanstackUnityForm } from '@payfit/unity-components'
- *
- * function Example() {
- *   const form = useTanstackUnityForm({ defaultValues: { name: 'John' } })
- *
- *   return (
- *     <form.AppForm>
- *       <form.InlineFieldGroup>
- *         <form.InlineFieldGroupHeader title="Contact Information" />
- *         <form.InlineFieldGroupReadView>...</form.InlineFieldGroupReadView>
- *         <form.InlineFieldGroupEditView legend="Edit">...</form.InlineFieldGroupEditView>
- *       </form.InlineFieldGroup>
- *     </form.AppForm>
- *   )
- * }
- * ```
- * @example Custom button labels and actions
- * ```tsx
- * <form.InlineFieldGroup
- *   editLabel="Modify"
- *   saveLabel="Confirm"
- *   cancelLabel="Discard"
- *   onSavePress={() => trackAnalytics('save_clicked')}
- * >
- *   <form.InlineFieldGroupHeader
- *     title="Contact Information"
- *     customActions={<Button onPress={handleDelete}>Delete</Button>}
- *   />
- *   ...
- * </form.InlineFieldGroup>
- * ```
- * @remarks
- * - Must be used as a child of InlineFieldGroup
- * - The title serves as the accessible label for the form via `aria-labelledby`
- * - The Edit button uses `aria-expanded` and `aria-controls` for accessibility
- * - Use `customActions` to add buttons that appear in both read and edit modes
- * - Use `onEditPress`, `onSavePress`, `onCancelPress` for analytics or side effects
- * @see {@link InlineFieldGroupHeaderProps} for all available props
- * @see {@link InlineFieldGroup} for the parent container component
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
- */
-export declare function InlineFieldGroupHeader({ title, subtitle, customActions, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace InlineFieldGroupHeader {
-    var displayName: string;
-}

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.js

@@ -1,39 +0,0 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { useContext as d } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import { useBreakpointListener as f } from "../../../hooks/use-breakpoint-listener.js";
-import { Text as i } from "../../text/Text.js";
-import { InlineFieldGroupContext as y } from "../InlineFieldGroup.context.js";
-import { InlineFieldGroupActions as h } from "./InlineFieldGroupActions.js";
-const x = m({
-  slots: {
-    base: "uy:flex uy:items-center uy:justify-between uy:w-full uy:gap-300",
-    titleContainer: "uy:flex uy:flex-col uy:gap-100 uy:flex-1"
-  }
-});
-function I({
-  title: l,
-  subtitle: t,
-  customActions: s
-}) {
-  const o = d(y), n = f(), a = n !== "xs" && n !== "sm";
-  if (!o)
-    throw new Error(
-      "InlineFieldGroupHeader must be used within InlineFieldGroup"
-    );
-  const { headerId: u } = o, { base: c, titleContainer: p } = x();
-  return /* @__PURE__ */ e("header", { className: c(), children: [
-    /* @__PURE__ */ e("hgroup", { className: p(), children: [
-      /* @__PURE__ */ r(i, { id: u, variant: "h3", color: "content.neutral", children: l }),
-      t && /* @__PURE__ */ r(i, { variant: "subtitle", color: "content.neutral", children: t })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "uy:flex uy:gap-100 uy:items-center", role: "group", children: [
-      s,
-      a && /* @__PURE__ */ r(h, { orientation: "horizontal" })
-    ] })
-  ] });
-}
-I.displayName = "InlineFieldGroupHeader";
-export {
-  I as InlineFieldGroupHeader
-};

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupReadView.d.ts

@@ -1,56 +0,0 @@
-import { PropsWithChildren } from 'react';
-export interface InlineFieldGroupReadViewProps extends PropsWithChildren {
-    /**
-     * Optional className for custom styling
-     */
-    className?: string;
-}
-/**
- * InlineFieldGroupReadView displays content only when the parent InlineFieldGroup is in read mode.
- * Wrap read-only data displays (like DefinitionList) in this component to show them when not editing.
- * The component automatically hides its content when entering edit mode using the `hidden` attribute
- * and `inert` for proper accessibility, ensuring screen readers and keyboard navigation skip it.
- * @example Basic usage with DefinitionList
- * ```tsx
- * import { useTanstackUnityForm, DefinitionList, DefinitionItem } from '@payfit/unity-components'
- *
- * function Example() {
- *   const form = useTanstackUnityForm({ defaultValues: { email: 'john@example.com' } })
- *
- *   return (
- *     <form.AppForm>
- *       <form.InlineFieldGroup>
- *         <form.InlineFieldGroupHeader title="Contact" />
- *         <form.InlineFieldGroupReadView>
- *           <form.Subscribe selector={state => state.values}>
- *             {values => (
- *               <DefinitionList>
- *                 <DefinitionItem term="Email" description={values.email} />
- *               </DefinitionList>
- *             )}
- *           </form.Subscribe>
- *         </form.InlineFieldGroupReadView>
- *         <form.InlineFieldGroupEditView legend="Edit contact">
- *           <form.AppField name="email">
- *             {field => <field.TextField label="Email" />}
- *           </form.AppField>
- *         </form.InlineFieldGroupEditView>
- *       </form.InlineFieldGroup>
- *     </form.AppForm>
- *   )
- * }
- * ```
- * @remarks
- * - Must be used as a child of InlineFieldGroup
- * - Use `form.Subscribe` to display current form values that update after saving
- * - The content remains in the DOM but is hidden with `hidden` and `inert` attributes in edit mode
- * @see {@link InlineFieldGroupReadViewProps} for all available props
- * @see {@link InlineFieldGroup} for the parent container component
- * @see {@link InlineFieldGroupEditView} for the corresponding edit mode component
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
- */
-export declare function InlineFieldGroupReadView({ children, className, }: InlineFieldGroupReadViewProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace InlineFieldGroupReadView {
-    var displayName: string;
-}

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupReadView.js

@@ -1,28 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useContext as d } from "react";
-import { InlineFieldGroupContext as t } from "../InlineFieldGroup.context.js";
-function l({
-  children: n,
-  className: o
-}) {
-  const i = d(t);
-  if (!i)
-    throw new Error(
-      "InlineFieldGroupReadView must be used within InlineFieldGroup"
-    );
-  const e = i.mode === "read";
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: o,
-      hidden: !e,
-      "aria-hidden": !e,
-      ...!e && { inert: "" },
-      children: n
-    }
-  );
-}
-l.displayName = "InlineFieldGroupReadView";
-export {
-  l as InlineFieldGroupReadView
-};

package/dist/esm/components/input/Input.d.ts

@@ -1,48 +0,0 @@
-import { ReactElement } from 'react';
-import { InputProps as AriaInputProps } from 'react-aria-components/Input';
-export interface InputProps extends Omit<AriaInputProps, 'prefix' | 'style' | 'className'> {
-    /**
-     * The type of the input field
-     * @default 'text'
-     */
-    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
-    /** Element to display before the input field */
-    prefix?: ReactElement;
-    /** Element to display after the input field */
-    suffix?: ReactElement;
-    /** Whether the field is required */
-    isRequired?: boolean;
-    /** Whether the field is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the field is in a loading state */
-    isLoading?: boolean;
-    /** Whether the field is disabled */
-    isDisabled?: boolean;
-    /** Whether the field is read-only */
-    isReadOnly?: boolean;
-    /**
-     * Clear button click handler
-     */
-    onClearButtonPress?: () => void;
-}
-/**
- * The `Input` components displays a styled, single HTML `<input>` field whose type is text-compatible (`text`, `password`, `email`, `tel`, `url`, `search`), and follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
- * @param {InputProps} props - Regular props from the `<input>` HTML element, plus state-related props
- * @see {@link InputProps} for all available props
- * @example
- * ```tsx
- * import { Input } from '@payfit/unity-components'
- *
- * function Example() {
- *   const [value, setValue] = useState()
- *
- *   const handleInputChange = (e) => {
- *     setValue(e.target.value)
- *   }
- *
- *   return <Input type="text" placeholder="write something..." value={value} onChange={handleInputChange} />
- * }
- * ```
- */
-declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
-export { Input };

package/dist/esm/components/input/Input.js

@@ -1,150 +0,0 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { uyTv as h } from "@payfit/unity-themes";
-import { Input as I } from "react-aria-components/Input";
-import { useIntl as N } from "react-intl";
-import { CircularIconButton as W } from "../icon-button/CircularIconButton.js";
-import { Icon as M } from "../icon/Icon.js";
-import { Spinner as C } from "../spinner/Spinner.js";
-const O = h({
-  slots: {
-    base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm: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",
-    prefix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
-    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
-    input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
-    state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0",
-    suffix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
-  },
-  variants: {
-    isInvalid: {
-      true: {
-        base: "uy:border-border-form-error uy:bg-surface-form-error",
-        prefix: "uy:bg-surface-form-error uy:border-border-form-error",
-        inputWrapper: "uy:bg-surface-form-error",
-        input: "uy:bg-surface-form-error",
-        state: "uy:text-content-form-error",
-        suffix: "uy:bg-surface-form-error uy:border-border-form-error"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly",
-        inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        input: "uy:bg-surface-form-disabled uy:text-content-form-readonly",
-        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled",
-        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
-        input: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
-        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-        prefix: "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
-        inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-        input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
-        state: "uy:text-content-neutral-disabled",
-        suffix: "uy:border-border-form-enabled uy:bg-surface-neutral-low uy:text-content-form-enabled"
-      }
-    }
-  ]
-}), S = v(
-  ({
-    type: i = "text",
-    prefix: s,
-    suffix: l,
-    isInvalid: r,
-    isLoading: o,
-    isDisabled: u,
-    isReadOnly: t,
-    onClearButtonPress: y,
-    ...a
-  }, f) => {
-    const n = N(), {
-      base: b,
-      prefix: m,
-      inputWrapper: c,
-      input: p,
-      state: x,
-      suffix: g
-    } = O({
-      isInvalid: !!r,
-      isReadOnly: !!t,
-      isDisabled: !!u
-    }), w = a.value && !o && !t && !u;
-    return delete a.isRequired, /* @__PURE__ */ d("div", { className: b(), children: [
-      s ? /* @__PURE__ */ e("span", { className: m(), children: s }) : null,
-      /* @__PURE__ */ d("div", { className: c(), children: [
-        /* @__PURE__ */ e(
-          I,
-          {
-            "data-dd-privacy": "mask",
-            ...a,
-            ref: f,
-            type: i,
-            className: p(),
-            "aria-busy": o,
-            "aria-invalid": r,
-            readOnly: t,
-            disabled: u
-          }
-        ),
-        /* @__PURE__ */ d("div", { className: x(), children: [
-          o && /* @__PURE__ */ e(
-            C,
-            {
-              color: "inherit",
-              size: "small",
-              label: n.formatMessage({
-                id: "unity:component:common:loading:label",
-                defaultMessage: "Loading..."
-              })
-            }
-          ),
-          r && /* @__PURE__ */ e(
-            M,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: n.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          ),
-          w && /* @__PURE__ */ e(
-            W,
-            {
-              title: n.formatMessage({
-                id: "unity:component:common:clear:title",
-                defaultMessage: "Clear"
-              }),
-              color: "content.neutral.low",
-              icon: "CloseOutlined",
-              onPress: () => {
-                y?.();
-              }
-            }
-          )
-        ] })
-      ] }),
-      l ? /* @__PURE__ */ e("span", { className: g(), children: l }) : null
-    ] });
-  }
-);
-S.displayName = "Input";
-export {
-  S as Input
-};

package/dist/esm/components/input/TanstackInput.d.ts

@@ -1,22 +0,0 @@
-import { InputProps } from './Input.js';
-export type TanstackInputProps = Omit<InputProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
-/**
- * `TanstackInput` is a controlled input wired to the TanStack Form field context.
- * It is based on the Unity `Input` component.
- *
- * Example:
- * ```tsx
- * function ExampleField() {
- *   const form = useTanstackUnityForm<{ name: string }>({ validators: {} })
- *   return (
- *     <form>
- *       <form.AppField name="name">
- *         {() => <TanstackInput placeholder="Your name" />}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- */
-declare const TanstackInput: import('react').ForwardRefExoticComponent<TanstackInputProps & import('react').RefAttributes<HTMLInputElement>>;
-export { TanstackInput };

package/dist/esm/components/input/TanstackInput.js

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

package/dist/esm/components/label/Label.d.ts

@@ -1,17 +0,0 @@
-import { LabelProps as AriaLabelProps } from 'react-aria-components/Label';
-export interface LabelProps extends AriaLabelProps {
-    /**
-     * Whether the field is required.
-     */
-    isRequired?: boolean;
-    /**
-     * The variant of the required label.
-     */
-    requiredVariant?: 'required' | 'optional';
-}
-/**
- * FormLabel is a component that displays a label for a form field.
- * It is used to provide context for the form field.
- */
-declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-export { Label };

package/dist/esm/components/label/Label.js

@@ -1,66 +0,0 @@
-import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { InputContext as f } from "react-aria-components/Input";
-import { Label as g } from "react-aria-components/Label";
-import { useSlottedContext as h } from "react-aria-components/slots";
-import { mergeProps as N } from "react-aria/mergeProps";
-import { useIntl as q } from "react-intl";
-const x = b({
-  slots: {
-    base: "uy:typography-body-strong uy:text-content-neutral-enabled uy:leading-[1lh]",
-    asterisk: "uy:text-content-danger uy:inline-block uy:ml-25",
-    optionalTag: "uy:typography-body uy:inline-block uy:ml-25"
-  },
-  variants: {
-    variant: {
-      strong: {
-        base: "uy:typography-body-strong"
-      },
-      body: {
-        base: "uy:typography-body"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "strong"
-  }
-}), v = c(
-  ({ children: n, ...a }, l) => {
-    const e = q(), i = h(f), m = N(
-      { isRequired: i?.["aria-required"] },
-      a
-    ), {
-      isRequired: t = !1,
-      requiredVariant: o = "required",
-      ...p
-    } = m, { base: d, asterisk: y, optionalTag: u } = x();
-    return /* @__PURE__ */ r(
-      g,
-      {
-        "data-dd-privacy": "allow",
-        ...p,
-        ref: l,
-        className: d({ className: a.className }),
-        children: [
-          n,
-          o === "required" && t && /* @__PURE__ */ r("span", { className: y(), children: [
-            "*",
-            /* @__PURE__ */ s("span", { className: "uy:sr-only", children: e.formatMessage({
-              id: "unity:component:label:required",
-              defaultMessage: "required"
-            }) })
-          ] }),
-          o === "optional" && !t && /* @__PURE__ */ s("span", { className: u({ className: a.className }), children: e.formatMessage({
-            id: "unity:component:label:optional",
-            defaultMessage: "(optional)"
-          }) })
-        ]
-      }
-    );
-  }
-);
-v.displayName = "Label";
-export {
-  v as Label
-};