@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/error-state/parts/Collapsible.js

@@ -1,68 +0,0 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useContext as l } from "react";
-import { uyTv as u } from "@payfit/unity-themes";
-import { Button as c } from "react-aria-components/Button";
-import { Disclosure as d, DisclosurePanel as y, DisclosureStateContext as f, Heading as m } from "react-aria-components/Disclosure";
-import { FormattedMessage as p } from "react-intl";
-import { Icon as h } from "../../icon/Icon.js";
-import { Text as b } from "../../text/Text.js";
-const n = u({
-  slots: {
-    base: [
-      "uy:w-full uy:rounded-50",
-      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-2",
-      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-solid",
-      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-offset-2",
-      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-utility-focus-ring"
-    ],
-    heading: "uy:w-full",
-    button: [
-      "uy:flex uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer",
-      "uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"
-    ],
-    title: "uy:flex uy:grow uy:text-left uy:items-center uy:justify-center",
-    icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center",
-    content: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top-left uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0"
-  },
-  variants: {
-    isExpanded: {
-      true: {
-        icon: "uy:rotate-180"
-      },
-      false: {
-        icon: "uy:rotate-0"
-      }
-    }
-  }
-}), v = () => {
-  const e = l(f), { button: i, title: o, icon: a, heading: r } = n({
-    isExpanded: e?.isExpanded
-  });
-  return /* @__PURE__ */ t(m, { "data-dd-privacy": "allow", className: r(), children: /* @__PURE__ */ t(c, { className: i(), slot: "trigger", children: /* @__PURE__ */ s(b, { variant: "bodyStrong", className: o(), children: [
-    /* @__PURE__ */ t(
-      h,
-      {
-        src: "CaretDownOutlined",
-        className: a(),
-        role: "presentation"
-      }
-    ),
-    /* @__PURE__ */ t(
-      p,
-      {
-        id: "unity:component:error-state:collapsible:title",
-        defaultMessage: "Show details"
-      }
-    )
-  ] }) }) });
-}, w = ({ children: e, ...i }) => {
-  const { base: o, content: a } = n();
-  return /* @__PURE__ */ s(d, { "data-dd-privacy": "allow", ...i, className: o(), children: [
-    /* @__PURE__ */ t(v, {}),
-    /* @__PURE__ */ t(y, { "data-dd-privacy": "allow", className: a(), children: /* @__PURE__ */ t("div", { className: "uy:ml-400 uy:typography-body", children: e }) })
-  ] });
-};
-w.displayName = "Collapsible";
-export {
-  w as Collapsible
-};

package/dist/esm/components/fieldset/Fieldset.d.ts

@@ -1,117 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren, ReactNode } from 'react';
-export declare const fieldset: import('tailwind-variants').TVReturnType<{
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-    disableEndMargin: {
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    legend: string;
-    description: string;
-    fieldsContainer: string;
-}, undefined, {
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-    disableEndMargin: {
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    legend: string;
-    description: string;
-    fieldsContainer: string;
-}, import('tailwind-variants').TVReturnType<{
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-    disableEndMargin: {
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    legend: string;
-    description: string;
-    fieldsContainer: string;
-}, undefined, unknown, unknown, undefined>>;
-export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
-    /**
-     * The legend of the fieldset.
-     */
-    legend: ReactNode;
-    /**
-     * An optional description of the fieldset.
-     */
-    description?: string;
-    /**
-     * Whether to hide the legend of the fieldset.
-     */
-    isLegendHidden?: boolean;
-    /**
-     * Whether to disable the end margin of the fieldset.
-     */
-    disableEndMargin?: boolean;
-}
-/**
- * The `Fieldset` component groups related form fields together with an accessible structure.
- * It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
- * @param {FieldsetProps} props - The props for the `Fieldset` component
- * @see {@link FieldsetProps} for all available props
- * @example
- * ```tsx
- * import { Fieldset } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <Fieldset
- *       legend="Personal Information"
- *       description="Please provide your contact details"
- *       isLegendHidden={false}
- *     >
- *       <TextField name="firstName" label="First name" />
- *       <TextField name="lastName" label="Last name" />
- *     </Fieldset>
- *   )
- * }
- * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
- */
-declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
-export { Fieldset };

package/dist/esm/components/fieldset/Fieldset.js

@@ -1,72 +0,0 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { useId as x } from "react-aria/useId";
-const h = b({
-  slots: {
-    base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
-    legend: "uy:typography-h3 uy:text-content-neutral",
-    description: "uy:block uy:typography-body uy:mt-100 uy:text-content-neutral",
-    fieldsContainer: "uy:flex uy:flex-col uy:gap-250"
-  },
-  variants: {
-    isLegendHidden: {
-      true: {
-        legend: "uy:sr-only",
-        description: "uy:sr-only",
-        fieldsContainer: "uy:mt-0"
-      },
-      false: {
-        legend: "uy:block",
-        description: "uy:block",
-        fieldsContainer: "uy:mt-300"
-      }
-    },
-    disableEndMargin: {
-      true: {
-        base: "uy:[&:last-of-type]:mb-0"
-      }
-    }
-  },
-  defaultVariants: {
-    isLegendHidden: !1,
-    disableEndMargin: !1
-  }
-}), v = g(
-  ({ children: t, ...d }, n) => {
-    const i = x(), { legend: l, description: e, isLegendHidden: a, disableEndMargin: r, ...o } = d, {
-      base: y,
-      legend: c,
-      description: u,
-      fieldsContainer: p
-    } = h({ isLegendHidden: a, disableEndMargin: r }), f = e ? `${i}-fieldset-description` : void 0;
-    return /* @__PURE__ */ m(
-      "fieldset",
-      {
-        "data-dd-privacy": "allow",
-        ...o,
-        ref: n,
-        className: y(),
-        "aria-describedby": f,
-        children: [
-          /* @__PURE__ */ s("legend", { className: c(), children: l }),
-          e && /* @__PURE__ */ s(
-            "span",
-            {
-              id: `${i}-fieldset-description`,
-              "data-fieldset-slot": "description",
-              className: u(),
-              children: e
-            }
-          ),
-          /* @__PURE__ */ s("div", { className: p(), children: t })
-        ]
-      }
-    );
-  }
-);
-v.displayName = "Fieldset";
-export {
-  v as Fieldset,
-  h as fieldset
-};

package/dist/esm/components/fieldset/parts/FieldGroup.d.ts

@@ -1,27 +0,0 @@
-/**
- * The `FieldGroup` component arranges form fields in a responsive grid layout within a Fieldset.
- * It optimizes space by displaying fields side-by-side on larger screens while stacking them on mobile devices.
- * @param {PropsWithChildren<object>} props - The props for the `FieldGroup` component
- * @example
- * ```tsx
- * import { Fieldset, FieldGroup } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <Fieldset legend="Personal Information">
- *       <FieldGroup>
- *         <TextField name="firstName" label="First name" />
- *         <TextField name="lastName" label="Last name" />
- *       </FieldGroup>
- *       <TextField name="email" label="Email" />
- *     </Fieldset>
- *   )
- * }
- * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset-fieldgroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
- */
-declare const FieldGroup: import('react').ForwardRefExoticComponent<object & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { FieldGroup };

package/dist/esm/components/fieldset/parts/FieldGroup.js

@@ -1,18 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-const u = p(
-  ({ children: r, ...o }, d) => /* @__PURE__ */ i(
-    "div",
-    {
-      ...o,
-      ref: d,
-      role: "group",
-      className: "uy:grid uy:grid-cols-1 uy:gap-y-250 uy:md:grid-cols-2 uy:md:gap-x-200",
-      children: r
-    }
-  )
-);
-u.displayName = "FieldGroup";
-export {
-  u as FieldGroup
-};

package/dist/esm/components/filter/Filter.controls.d.ts

@@ -1,192 +0,0 @@
-import { Selection } from 'react-aria-components/GridList';
-import { SelectListProps } from '../select-list/SelectList.js';
-import { FilterProps } from './Filter.types.js';
-/**
- * Represents a single selectable item in a filter.
- *
- * Use this type to define the data structure for individual options in your filter.
- * Each item must have a unique `id` and a human-readable `label`.
- * @example
- * ```tsx
- * const statusItems: FilterItem[] = [
- *   { id: 'active', label: 'Active' },
- *   { id: 'inactive', label: 'Inactive' },
- *   { id: 'pending', label: 'Pending' },
- * ]
- * ```
- */
-export interface FilterItem {
-    /**
-     * Unique identifier for the item. Used as the value in selections.
-     */
-    id: string;
-    /**
-     * Human-readable label displayed to users.
-     */
-    label: string;
-}
-/**
- * Represents a group of related filter items.
- *
- * Use this type to organize filter options into logical categories, improving UX when
- * dealing with many options. Groups are rendered with a header label and contain multiple
- * child items.
- * @example
- * ```tsx
- * const departmentGroups: FilterItemGroup[] = [
- *   {
- *     id: 'business',
- *     label: 'Business',
- *     children: [
- *       { id: 'sales', label: 'Sales' },
- *       { id: 'marketing', label: 'Marketing' },
- *     ],
- *   },
- *   {
- *     id: 'tech',
- *     label: 'Tech',
- *     children: [
- *       { id: 'engineering', label: 'Engineering' },
- *       { id: 'product', label: 'Product' },
- *     ],
- *   },
- * ]
- * ```
- */
-export interface FilterItemGroup {
-    /**
-     * Unique identifier for the group.
-     */
-    id: string;
-    /**
-     * Label for the group header.
-     */
-    label: string;
-    /**
-     * Array of items belonging to this group.
-     */
-    children: FilterItem[];
-}
-/**
- * Creates a pre-configured SelectList control for use with the Filter component.
- *
- * This helper function simplifies the most common filter use case: selecting items from a list.
- * It handles the rendering of SelectList with proper multi-select behavior, keyboard navigation,
- * and support for both flat lists and grouped items. Use this function to quickly create filter
- * controls without manually managing SelectList configuration.
- *
- * The function returns a render function compatible with the Filter component's `renderControl` prop.
- * It automatically configures the SelectList with sensible defaults: multiple selection, selected items
- * sorted first, and proper accessibility attributes.
- * @template TFilterType - The type of the filter value (defaults to Selection from React Aria)
- * @template TItemType - The type of items in the list (FilterItem or FilterItemGroup)
- * @param items - An iterable collection of items or item groups to display in the list
- * @param props - Additional props to pass to the SelectList component (excluding items, value,
- *                onChange, and children which are managed internally)
- * @returns A render function that creates a SelectList with the provided items and configuration
- * @example
- * ```tsx
- * import { Filter, selectListFilter } from '@payfit/unity-components'
- * import { useState } from 'react'
- *
- * // Simple flat list
- * const statusItems = [
- *   { id: 'active', label: 'Active' },
- *   { id: 'inactive', label: 'Inactive' },
- *   { id: 'pending', label: 'Pending' },
- * ]
- *
- * function StatusFilter() {
- *   const [value, setValue] = useState<Set<string>>(new Set())
- *
- *   return (
- *     <Filter
- *       label="Status"
- *       value={value}
- *       onChange={setValue}
- *       renderControl={selectListFilter(statusItems, {})}
- *     />
- *   )
- * }
- * ```
- * @example
- * ```tsx
- * // Grouped list with custom aria-label
- * const departmentGroups = [
- *   {
- *     id: 'business',
- *     label: 'Business',
- *     children: [
- *       { id: 'sales', label: 'Sales' },
- *       { id: 'marketing', label: 'Marketing' },
- *     ],
- *   },
- *   {
- *     id: 'tech',
- *     label: 'Tech',
- *     children: [
- *       { id: 'engineering', label: 'Engineering' },
- *       { id: 'product', label: 'Product' },
- *     ],
- *   },
- * ]
- *
- * function DepartmentFilter() {
- *   const [value, setValue] = useState<Set<string>>(new Set())
- *
- *   return (
- *     <Filter
- *       label="Departments"
- *       value={value}
- *       onChange={setValue}
- *       renderControl={selectListFilter(departmentGroups, {
- *         'aria-label': 'Select departments',
- *       })}
- *     />
- *   )
- * }
- * ```
- * @remarks
- * - The returned SelectList is configured with `selectionMode="multiple"` by default
- * - Selected items are automatically sorted to the top of the list using `sortSelectedFirst`
- * - The escape key behavior is set to `"none"` to prevent closing the filter popover accidentally
- * - A maximum height of 300px is applied with scrolling enabled for long lists
- * - Both flat lists (FilterItem[]) and grouped lists (FilterItemGroup[]) are supported
- */
-export declare function selectListFilter<TFilterType extends Selection = Selection, TItemType extends FilterItem | FilterItemGroup = FilterItem | FilterItemGroup>(items: Iterable<TItemType>, props: Omit<SelectListProps<TItemType>, 'items' | 'value' | 'onChange' | 'children'>): (value: TFilterType, onChange: FilterProps<TFilterType>["onChange"]) => import("react/jsx-runtime").JSX.Element;
-/**
- * Render the label of a filter that uses the default SelectList component.
- * This function will extract all the labels of all the selected items, and
- * create a comma-separated string from them.
- * @param items the array of items used in the select list
- * @return A curried function that flattens items into a comma-separated string
- * @example
- * ```tsx
- * import { Filter, selectListFilter, selectListLabel } from '@payfit/unity-components'
- * import { useState } from 'react'
- *
- * // Simple flat list
- * const statusItems = [
- *   { id: 'active', label: 'Active' },
- *   { id: 'inactive', label: 'Inactive' },
- *   { id: 'pending', label: 'Pending' },
- * ]
- *
- * function StatusFilter() {
- *   const [value, setValue] = useState<Set<string>>(new Set())
- *
- *   return (
- *     <Filter
- *       label="Status"
- *       value={value}
- *       onChange={setValue}
- *       renderControl={selectListFilter(statusItems, {})}
- *       renderLabel={selectListLabel(items)}
- *     />
- *   )
- * }
- * ```
- * @remarks
- * - Both flat lists (FilterItem[]) and grouped lists (FilterItemGroup[]) are supported
- */
-export declare function selectListLabel(items: Array<FilterItem | FilterItemGroup>): (value: Selection) => string;

package/dist/esm/components/filter/Filter.controls.js

@@ -1,45 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import { SelectListOptGroup as u } from "../select-list/parts/SelectListOptGroup.js";
-import { SelectListOption as a } from "../select-list/parts/SelectListOption.js";
-import { SelectList as p } from "../select-list/SelectList.js";
-function s(l) {
-  return "children" in l && l.children.length > 0;
-}
-function m(l, n) {
-  const t = (r) => /* @__PURE__ */ c(u, { items: r.children, label: r.label, children: (i) => /* @__PURE__ */ c(a, { id: i.id, textValue: i.label, children: i.label }) }), e = (r) => /* @__PURE__ */ c(a, { id: r.id, textValue: r.label, children: r.label });
-  return (r, i) => /* @__PURE__ */ c(
-    p,
-    {
-      ...n,
-      items: l,
-      value: r,
-      selectionMode: "multiple",
-      onChange: (o) => {
-        i(o);
-      },
-      escapeKeyBehavior: "none",
-      sortSelectedFirst: !0,
-      className: "uy:scroll-pb-500",
-      children: (o) => s(o) ? t(o) : e(o)
-    }
-  );
-}
-function L(l) {
-  return (n) => {
-    if (n === "all")
-      return l.flatMap((e) => s(e) ? e.children : e).map((e) => e.label).join(", ");
-    const t = [];
-    for (const e of l) {
-      if (s(e)) {
-        t.push(...e.children.filter((r) => n.has(r.id)));
-        continue;
-      }
-      n.has(e.id) && t.push(e);
-    }
-    return t.map((e) => e.label).join(", ");
-  };
-}
-export {
-  m as selectListFilter,
-  L as selectListLabel
-};