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

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

@@ -1,82 +0,0 @@
-import { jsxs as M, jsx as t } from "react/jsx-runtime";
-import { forwardRef as P } from "react";
-import { useFormContext as T } from "react-hook-form";
-import { tv as g } from "tailwind-variants";
-import { FormField as L } from "../form-field/FormField.mjs";
-import { FormControl as R } from "../form-field/parts/FormControl.mjs";
-import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.mjs";
-import { FormHelperText as k } from "../form-field/parts/FormHelperText.mjs";
-import { FormLabel as q } from "../form-field/parts/FormLabel.mjs";
-import { MultiSelect as u } from "../multi-select/MultiSelect.mjs";
-const v = g({
-  base: "uy-flex uy-flex-col uy-gap-100"
-});
-function w(e, i) {
-  const { control: l, setValue: f } = T(), {
-    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 = P(function(i, l) {
-  return w(i, l);
-});
-C.displayName = "MultiSelectField";
-export {
-  C as MultiSelectField
-};

package/dist/esm/components/nav/Nav.d.mts

@@ -1,12 +0,0 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export type NavProps = PropsWithChildren<Pick<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-describedby' | 'aria-labelledby' | 'aria-hidden' | 'aria-live'> & {
-    /** The title of the navigation menu. */
-    title?: string;
-}>;
-/**
- * The `Nav` component represents a vertical navigation menu with optional title and navigation items of multiple types.
- */
-export declare function Nav({ children, title, ...rest }: NavProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Nav {
-    var displayName: string;
-}

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

@@ -1,28 +0,0 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import n from "../../hooks/use-id.mjs";
-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.d.mts

@@ -1,30 +0,0 @@
-import { default as React, ReactNode } from 'react';
-import { DataAttributes } from '../../../types/DataAttributes.mjs';
-import { NavItem, NavItemProps } from './NavItem.mjs';
-type NavGroupChildren = React.ReactElement<NavItemProps, typeof NavItem>;
-type NavGroupProps = {
-    /** The child elements to be rendered inside the NavGroup. They must be `<NavItem>` components. */
-    children: NavGroupChildren | NavGroupChildren[];
-    /** The label to show for the NavGroup. */
-    label: string;
-    /** The prefix element to be displayed before the label. It can be any valid React element. */
-    prefix?: ({ isExpanded }: {
-        isExpanded: boolean;
-    }) => ReactNode;
-    /** The suffix element to be displayed after the label.  It can be any valid React element. */
-    suffix?: ReactNode;
-    /** Whether the NavGroup is currently expanded. Use it to switch the component to a controlled mode. */
-    isExpanded?: boolean;
-    /** Whether the NavGroup is expanded by default. It only has effect in uncontrolled mode */
-    defaultExpanded?: boolean;
-    /** Callback function to be called when the NavGroup is expanded or collapsed. */
-    onToggle?: (isExpanded: boolean) => void;
-} & DataAttributes;
-/**
- * The `NavGroup` component represents a tree of navigation items grouped under a single root element in a `Nav` component. It can be expanded or collapsed to show or hide its children.
- */
-export declare function NavGroup({ children, label, prefix, suffix, defaultExpanded, isExpanded: controlledIsExpanded, onToggle, ...dataAttributes }: NavGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NavGroup {
-    var displayName: string;
-}
-export {};

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

@@ -1,105 +0,0 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import s, { useState as G, useCallback as j } from "react";
-import { Button as B } from "react-aria-components";
-import { twMerge as D } from "tailwind-merge";
-import { tv as _ } from "tailwind-variants";
-import $ from "../../../hooks/use-id.mjs";
-import { Icon as k } from "../../icon/Icon.mjs";
-import { navItemBase as z } from "./NavItem.mjs";
-const H = _({
-  extend: z,
-  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 M({
-  children: y,
-  label: p,
-  prefix: i,
-  suffix: m,
-  defaultExpanded: f = !1,
-  isExpanded: l,
-  onToggle: n,
-  ...x
-}) {
-  const u = $(), [h, b] = G(f), r = l !== void 0, e = r ? l : h, v = j(() => {
-    r || b((t) => !t), n == null || n(!e);
-  }, [r, 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: g,
-    label: w,
-    suffix: E,
-    content: S,
-    contentWrapper: C,
-    caret: W
-  } = H({ level: 0, expanded: e });
-  return /* @__PURE__ */ o("li", { className: "uy-flex uy-flex-col uy-gap-50", children: [
-    /* @__PURE__ */ o(
-      B,
-      {
-        id: c,
-        className: D(I(), "uy-w-full"),
-        onPress: v,
-        "aria-expanded": e,
-        "aria-controls": d,
-        ...x,
-        children: [
-          i && /* @__PURE__ */ a("span", { className: g(), children: i({ isExpanded: e }) }),
-          /* @__PURE__ */ a("span", { className: w(), children: p }),
-          /* @__PURE__ */ o("span", { className: E(), role: "presentation", children: [
-            m,
-            /* @__PURE__ */ a(
-              k,
-              {
-                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: S(),
-            "aria-labelledby": c,
-            "aria-hidden": !e,
-            children: N
-          }
-        )
-      }
-    )
-  ] });
-}
-M.displayName = "NavGroup";
-export {
-  M as NavGroup
-};

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

@@ -1,279 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-import { DataAttributes } from '../../../types/DataAttributes.mjs';
-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, import('tailwind-variants/dist/config').TVConfig<{
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}, {
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}>, {
-    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, import('tailwind-variants/dist/config').TVConfig<{
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}, {
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;
-declare const navItem: import('tailwind-variants').TVReturnType<{
-    isActive: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: {
-            base: string;
-            label: string;
-        };
-    };
-}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    isActive: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: {
-            base: string;
-            label: string;
-        };
-    };
-}, {
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}>, {
-    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, import('tailwind-variants/dist/config').TVConfig<{
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}, {
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}>, {
-    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, import('tailwind-variants/dist/config').TVConfig<{
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}, {
-    level: {
-        0: string;
-        1: string;
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-        false: string;
-    };
-}>, 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;
-}> & 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, ...dataAttributes }: NavItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NavItem {
-    var displayName: string;
-}
-export {};

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

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

package/dist/esm/components/payfit-brand/PayFitBrand.d.mts

@@ -1,22 +0,0 @@
-export type PayFitBrandProps = {
-    /**
-     * The color variant of the brand. It is "original" by default.
-     */
-    color?: 'original' | 'dark' | 'light';
-    /**
-     * The text label for the brand. Defaults to "PayFit Logo".
-     */
-    label?: string;
-    /**
-     * The description for the brand for screen readers. Optional.
-     */
-    description?: string;
-    /**
-     * The width of the brand. Defaults to the minimum of `104px`.
-     */
-    width?: number;
-};
-/**
- * The PayFitBrand component represents the PayFit logo with several properties that follow our brand guidelines.
- */
-export declare const PayFitBrand: import('react').ForwardRefExoticComponent<PayFitBrandProps & import('react').RefAttributes<SVGSVGElement>>;