@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

package/dist/esm/components/link/Link.d.ts

@@ -1,83 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { LinkProps as AriaLinkProps } from 'react-aria-components';
-import { NavLinkProps as NavRouterLinkProps } from 'react-router-dom';
-import { VariantProps } from 'tailwind-variants';
-import { link } from './Link.variants.js';
-export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
-    /**
-     * The URL the link navigates to.
-     */
-    href: HTMLAnchorElement['href'] | NavRouterLinkProps['to'];
-    /**
-     * The link id
-     */
-    id?: HTMLAttributes<HTMLLinkElement>['id'];
-    /**
-     * The link's display variant. Links can be inline with text or standalone (block).
-     * @default 'inline'
-     */
-    variant?: VariantProps<typeof link>['variant'];
-    /**
-     * The link's color.
-     * @default 'primary'
-     */
-    color?: VariantProps<typeof link>['color'];
-    /**
-     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
-     * @default false
-     */
-    isExternal?: boolean;
-    /**
-     * Whether the link marks the current section or page.
-     * @default false
-     */
-    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, 'aria-current'> | undefined;
-    /**
-     * When true, the active state will only be applied if the location is matched exactly.
-     * @default false
-     */
-    isExact?: boolean;
-    maxCharactersTruncation?: number;
-};
-/**
- * Links allow users to navigate to different pages or sections.
- */
-declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
-    /**
-     * The URL the link navigates to.
-     */
-    href: HTMLAnchorElement["href"] | NavRouterLinkProps["to"];
-    /**
-     * The link id
-     */
-    id?: HTMLAttributes<HTMLLinkElement>["id"];
-    /**
-     * The link's display variant. Links can be inline with text or standalone (block).
-     * @default 'inline'
-     */
-    variant?: VariantProps<typeof link>["variant"];
-    /**
-     * The link's color.
-     * @default 'primary'
-     */
-    color?: VariantProps<typeof link>["color"];
-    /**
-     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
-     * @default false
-     */
-    isExternal?: boolean;
-    /**
-     * Whether the link marks the current section or page.
-     * @default false
-     */
-    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
-    /**
-     * When true, the active state will only be applied if the location is matched exactly.
-     * @default false
-     */
-    isExact?: boolean;
-    maxCharactersTruncation?: number;
-} & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLAnchorElement>>;
-export { Link };

package/dist/esm/components/link/Link.js

@@ -1,66 +0,0 @@
-import { jsxs as k, jsx as y } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { IconSprite as g } from "@payfit/unity-icons";
-import { Link as w } from "react-aria-components";
-import { useRouter as x } from "../../providers/router/RouterProvider.js";
-import { link as L } from "./Link.variants.js";
-import { isExternalUrl as A } from "./utils.js";
-const E = v(
-  ({
-    href: o,
-    children: a,
-    variant: s = "inline",
-    color: c = "primary",
-    isDisabled: n = !1,
-    isExact: m = !1,
-    isCurrent: p = void 0,
-    isExternal: d,
-    maxCharactersTruncation: t,
-    ...r
-  }, u) => {
-    const l = x(), e = d ?? A(o), i = !e && l ? l.isActive(o.toString(), m) : p, f = L({
-      variant: s,
-      color: c,
-      isDisabled: n,
-      isTruncated: !!t
-    });
-    return /* @__PURE__ */ k(
-      w,
-      {
-        "data-dd-privacy": "allow",
-        ...r,
-        href: o,
-        ref: u,
-        style: !!t ? {
-          "--uy-link-max-w": `${t}ch`
-        } : {},
-        className: f,
-        isDisabled: n,
-        target: e ? "_blank" : r.target,
-        rel: e && !r.rel ? "noopener noreferrer" : r.rel,
-        ...i !== void 0 && {
-          "data-current": i,
-          "aria-current": i ? "page" : void 0
-        },
-        children: [
-          a,
-          e && /* @__PURE__ */ y(
-            g,
-            {
-              src: "ArrowSquareOutOutlined",
-              color: "currentColor",
-              width: "1em",
-              height: "1em",
-              role: "presentation",
-              className: "uy-self-center uy-inline"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-E.displayName = "Link";
-export {
-  E as Link
-};

package/dist/esm/components/link/Link.variants.d.ts

@@ -1,120 +0,0 @@
-export declare const link: import('tailwind-variants').TVReturnType<{
-    variant: {
-        inline: string;
-        standalone: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isTruncated: {
-        true: string;
-        false: string;
-    };
-}, undefined, "uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        inline: string;
-        standalone: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isTruncated: {
-        true: string;
-        false: string;
-    };
-}, {
-    variant: {
-        inline: string;
-        standalone: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isTruncated: {
-        true: string;
-        false: string;
-    };
-}>, {
-    variant: {
-        inline: string;
-        standalone: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isTruncated: {
-        true: string;
-        false: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
-        inline: string;
-        standalone: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isTruncated: {
-        true: string;
-        false: string;
-    };
-}, undefined, "uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        inline: string;
-        standalone: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isTruncated: {
-        true: string;
-        false: string;
-    };
-}, {
-    variant: {
-        inline: string;
-        standalone: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isTruncated: {
-        true: string;
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;

package/dist/esm/components/menu/Menu.d.ts

@@ -1,10 +0,0 @@
-import { MenuTriggerProps } from 'react-aria-components';
-interface MenuProps {
-    defaultOpen?: MenuTriggerProps['defaultOpen'];
-    children?: MenuTriggerProps['children'];
-}
-export declare function Menu({ defaultOpen, children }: MenuProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Menu {
-    var displayName: string;
-}
-export {};

package/dist/esm/components/menu/parts/MenuContent.d.ts

@@ -1,11 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { PopoverProps } from 'react-aria-components';
-interface MenuContent {
-    placement?: PopoverProps['placement'];
-    width?: number;
-}
-export declare function MenuContent({ children, placement, width, }: PropsWithChildren<MenuContent>): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuContent {
-    var displayName: string;
-}
-export {};

package/dist/esm/components/menu/parts/MenuContent.js

@@ -1,22 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Popover as n, Menu as a } from "react-aria-components";
-function y({
-  children: r,
-  placement: o,
-  width: e
-}) {
-  const t = e ? `uy-w-[${e}px]` : "";
-  return /* @__PURE__ */ u(
-    n,
-    {
-      placement: o,
-      className: "uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",
-      "data-dd-privacy": "allow",
-      children: /* @__PURE__ */ u(a, { autoFocus: "first", className: `uy-min-w-[320px] ${t}`, children: r })
-    }
-  );
-}
-y.displayName = "MenuContent";
-export {
-  y as MenuContent
-};

package/dist/esm/components/menu/parts/MenuHeader.d.ts

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-interface MenuHeaderProps {
-    className?: string;
-}
-export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuHeader {
-    var displayName: string;
-}
-export {};

package/dist/esm/components/menu/parts/MenuHeader.js

@@ -1,16 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { MenuSection as n, Header as m } from "react-aria-components";
-import { MenuSeparator as t } from "./MenuSeparator.js";
-function i({
-  children: r,
-  className: o
-}) {
-  return /* @__PURE__ */ a(n, { children: [
-    /* @__PURE__ */ e(m, { className: `uy-p-100 ${o}`, children: r }),
-    /* @__PURE__ */ e(t, {})
-  ] });
-}
-i.displayName = "MenuHeader";
-export {
-  i as MenuHeader
-};

package/dist/esm/components/menu/parts/MenuItem.d.ts

@@ -1,15 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { MenuItemProps as MenuItemAriaComponentProps } from 'react-aria-components';
-import { DataAttributes } from '../../../types/DataAttributes.js';
-interface MenuItemProps extends DataAttributes {
-    children?: MenuItemAriaComponentProps['children'];
-    href?: MenuItemAriaComponentProps['href'];
-    onAction?: MenuItemAriaComponentProps['onAction'];
-    prefix?: ReactNode;
-    className?: string;
-}
-export declare function MenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuItem {
-    var displayName: string;
-}
-export {};

package/dist/esm/components/menu/parts/MenuSeparator.d.ts

@@ -1,4 +0,0 @@
-export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuSeparator {
-    var displayName: string;
-}

package/dist/esm/components/menu/parts/MenuTrigger.d.ts

@@ -1,10 +0,0 @@
-import { PropsWithChildren } from 'react';
-interface MenuTriggerProps {
-    className?: string;
-    asChild?: boolean;
-}
-export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuTrigger {
-    var displayName: string;
-}
-export {};

package/dist/esm/components/multi-select/MultiSelect.d.ts

@@ -1,62 +0,0 @@
-import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.js';
-declare const MultiSelectComponent: <TItem extends Record<string | number, unknown>, TItemKey extends keyof TItem, TKeyType extends TItem[TItemKey] & (string | number)>(props: MultiSelectProps<TItem, TItemKey, TKeyType>, ref: React.ForwardedRef<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
-/**
- * The MultiSelect component allows users to select multiple items from a dropdown list.
- * The component provides two different APIs:
- * 1. Static API - For simple cases where options are defined as direct children and use primitive values as keys (strings or numbers)
- * 2. Dynamic API - For data-driven cases where options are generated from a dynamic collection with typed objects
- * @example
- * ```tsx
- * import { MultiSelect, MultiSelectOption, MultiSelectOptGroup } from '@payfit/unity-components'
- *
- * // Static API - Options defined as direct children
- * <MultiSelect
- *   placeholder="Select fruits..."
- *   onChange={(selected) => console.log(selected)}
- * >
- *   <MultiSelectOptGroup label="Citrus" withSeparator>
- *     <MultiSelectOption value="orange">Orange</MultiSelectOption>
- *     <MultiSelectOption value="lemon">Lemon</MultiSelectOption>
- *   </MultiSelectOptGroup>
- *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
- * </MultiSelect>
- *
- * // Dynamic API - Options generated from a collection with typed objects
- * interface Fruit {
- *   id: string;
- *   name: string;
- *   category: string;
- * }
- *
- * const fruits: Set<Fruit> = new Set([
- *   { id: 'apple-1', name: 'Apple', category: 'Core' },
- *   { id: 'orange-1', name: 'Orange', category: 'Citrus' }
- * ]);
- *
- * <MultiSelect
- *   items={fruits}
- *   placeholder="Select fruits..."
- *   value={new Set(['apple-1'])}
- *   getItemValue={item => item.id}
- *   renderValue={(items) =>
- *     Array.from(items)
- *       .map(item => item.name)
- *       .join(', ')
- *   }
- * >
- *   {(item) => (
- *     <MultiSelectOption value={item.id}>
- *       {item.name}
- *     </MultiSelectOption>
- *   )}
- * </MultiSelect>
- * ```
- * @component
- * @template TItem - The type of items in the collection. When using the dynamic API, it must be a Record or an object. For the static API, it defaults to a string or number.
- * @template TItemKey - The key name within TItem used as the selection value (must be a key of TItem). Applies only to the dynamic API.
- * @template TKeyType - The type of the property at TItem[TItemKey] (must be string or number). Applies only to the dynamic API.
- * @remarks
- * [API & Docs](https://unity-components.payfit.io/?path=/docs/inputs-multiselect--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
- */
-export declare const MultiSelect: MultiSelectComponent;
-export {};

package/dist/esm/components/multi-select/MultiSelect.js

@@ -1,233 +0,0 @@
-import { jsx as u, jsxs as q } from "react/jsx-runtime";
-import { forwardRef as Se, useMemo as S, useCallback as d } from "react";
-import { ComboboxProvider as pe, SelectProvider as z } from "@ariakit/react";
-import { useComboboxFilter as he } from "./hooks/use-combobox-filter.js";
-import { useMultiSelectionState as ve } from "./hooks/use-multiselection-state.js";
-import { MultiSelectContext as J } from "./Multiselect.context.js";
-import { MultiSelectButton as U } from "./parts/MultiSelectButton.js";
-import { MultiSelectPopover as W } from "./parts/MultiSelectPopover.js";
-function X(t) {
-  return t instanceof Map;
-}
-function Ve(t) {
-  return !Object.prototype.hasOwnProperty.call(t, "items");
-}
-function a(t) {
-  return String(t);
-}
-function p(t) {
-  return isNaN(Number(t)) ? t : Number(t);
-}
-function Z(t) {
-  return Array.from(t, a);
-}
-function Y(t) {
-  return new Set(Z(t));
-}
-const $ = (t, g) => {
-  const o = Ve(t), w = (e) => {
-    if (Object.hasOwnProperty.call(e, "value"))
-      return e.value;
-    if (Object.prototype.hasOwnProperty.call(e, "id"))
-      return e.id;
-    if (typeof e == "string")
-      return e;
-    const n = Object.keys(e)[0];
-    return e[n];
-  }, ee = o ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((n) => w(n)).join(", "), m = t, C = t, c = S(
-    () => o ? void 0 : m.items,
-    [o, m.items]
-  ), r = o ? void 0 : m.getItemValue ?? w, { children: v } = o ? C : m, te = o ? void 0 : m.searchOptions, { children: O } = C, {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: Pe,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getItemValue: Ae,
-    value: V,
-    defaultValue: f,
-    onChange: b,
-    onBlur: M,
-    isDisabled: x,
-    isInvalid: j,
-    isLoading: D,
-    isReadOnly: I,
-    isSearchable: h,
-    placeholder: R,
-    onClearButtonPress: F,
-    renderValue: re,
-    maxVisibleItems: N = 7,
-    ...B
-  } = t, ne = re ?? ee, y = d(() => o || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, o]), oe = d(() => {
-    if ("value" in t)
-      return V ? Y(V) : /* @__PURE__ */ new Set();
-  }, [t, V]), se = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), le = d(
-    (e) => {
-      if (!b) return;
-      const n = new Set(
-        Array.from(e).map((l) => p(l))
-      );
-      b(n);
-    },
-    [b]
-  ), {
-    selectedKeys: i,
-    selectKey: L,
-    unselectKey: T
-  } = ve({
-    selectedKeys: oe(),
-    defaultSelectedKeys: se(),
-    onSelectionChange: le
-  }), ae = d(
-    (e) => {
-      L(a(e));
-    },
-    [L]
-  ), ce = d(
-    (e) => {
-      T(a(e));
-    },
-    [T]
-  ), { setSearchQuery: ie, matchingItems: K } = he({
-    items: y(),
-    extractSearchableText: (e) => o ? [""] : [
-      a(
-        (r == null ? void 0 : r(e)) || ""
-      )
-    ],
-    enabled: h,
-    searchOptions: te
-  }), ue = () => {
-    if (o) return Array.from(i);
-    const e = y();
-    return Array.from(i).map((n) => {
-      const l = e.find(
-        (s) => a(
-          (r == null ? void 0 : r(s)) || ""
-        ) === n
-      );
-      return l && r ? r(l) : p(n);
-    });
-  }, de = () => {
-    if (o)
-      return new Set(
-        Array.from(i).map((l) => p(l))
-      );
-    const e = y(), n = /* @__PURE__ */ new Set();
-    return Array.from(i).forEach((l) => {
-      const s = e.find(
-        (A) => a(
-          (r == null ? void 0 : r(A)) || ""
-        ) === l
-      );
-      s && n.add(s);
-    }), n;
-  }, fe = () => {
-    if (f)
-      return Z(f);
-  }, P = S(ue, [
-    i,
-    o,
-    r,
-    y
-  ]), _ = S(de, [
-    i,
-    o,
-    r,
-    y
-  ]), G = S(fe, [f]), k = (e) => {
-    const n = new Set(e), l = new Set(
-      P.map((s) => a(s))
-    );
-    for (const s of n)
-      l.has(s) || ae(p(s));
-    for (const s of l)
-      n.has(s) || ce(p(s));
-  }, E = d(() => o ? O : c ? X(c) ? Array.from(c.entries()).map(([e, n]) => {
-    const l = n.filter(
-      (s) => K.some((A) => {
-        const me = (r == null ? void 0 : r(s)) || "", ye = (r == null ? void 0 : r(A)) || "";
-        return a(ye) === a(me);
-      })
-    );
-    return v(e, l);
-  }) : K.map(
-    (e) => v(
-      e
-    )
-  ) : null, [v, c, K, O, r, o]), H = S(() => E(), [E]), Q = ne;
-  return h ? /* @__PURE__ */ u(pe, { resetValueOnHide: !0, setValue: ie, children: /* @__PURE__ */ u(
-    z,
-    {
-      value: P.map(
-        (e) => a(e)
-      ),
-      defaultValue: G,
-      setValue: k,
-      focusLoop: !0,
-      children: /* @__PURE__ */ q(
-        J.Provider,
-        {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
-          children: [
-            /* @__PURE__ */ u(
-              U,
-              {
-                ref: g,
-                placeholder: R,
-                isDisabled: x,
-                isReadOnly: I,
-                isLoading: D,
-                isInvalid: j,
-                renderValue: Q,
-                selectedItems: _,
-                onClearButtonPress: F,
-                ...B
-              }
-            ),
-            /* @__PURE__ */ u(W, { onBlur: M, children: H })
-          ]
-        }
-      )
-    }
-  ) }) : /* @__PURE__ */ u(
-    z,
-    {
-      value: P.map(
-        (e) => a(e)
-      ),
-      defaultValue: G,
-      setValue: k,
-      focusLoop: !0,
-      children: /* @__PURE__ */ q(
-        J.Provider,
-        {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
-          children: [
-            /* @__PURE__ */ u(
-              U,
-              {
-                ref: g,
-                placeholder: R,
-                isDisabled: x,
-                isReadOnly: I,
-                isLoading: D,
-                isInvalid: j,
-                renderValue: Q,
-                selectedItems: _,
-                onClearButtonPress: F,
-                ...B
-              }
-            ),
-            /* @__PURE__ */ u(W, { onBlur: M, children: H })
-          ]
-        }
-      )
-    }
-  );
-};
-$.displayName = "MultiSelect";
-const Ie = Se(
-  $
-);
-export {
-  Ie as MultiSelect
-};

package/dist/esm/components/multi-select/Multiselect.context.d.ts

@@ -1,7 +0,0 @@
-interface MultiSelectContextType {
-    isSearchable?: boolean;
-    maxVisibleItems?: number;
-    selectedKeys?: Set<string>;
-}
-export declare const MultiSelectContext: import('react').Context<MultiSelectContextType>;
-export {};

package/dist/esm/components/multi-select/Multiselect.context.js

@@ -1,8 +0,0 @@
-import { createContext as e } from "react";
-const o = e({
-  isSearchable: !1,
-  selectedKeys: /* @__PURE__ */ new Set()
-});
-export {
-  o as MultiSelectContext
-};