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

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.js

@@ -0,0 +1,20 @@
+import { uyTv as a } from "@payfit/unity-themes";
+const r = a({
+  slots: {
+    base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action",
+    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:sm:items-center"
+  },
+  variants: {
+    wrap: {
+      wrap: {
+        base: "uy:flex-wrap"
+      },
+      nowrap: {
+        base: ""
+      }
+    }
+  }
+});
+export {
+  r as breadcrumbsVariant
+};

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import { BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components';
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children'> {
+    /** The link of the breadcrumb */
+    href: string;
+    /** The text of the breadcrumb */
+    label: string;
+}
+declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLLIElement>>;
+export { Breadcrumb };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.js

@@ -0,0 +1,33 @@
+import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { Breadcrumb as s } from "react-aria-components";
+import { Icon as m } from "../../icon/Icon.js";
+import { Link as u } from "../../link/Link.js";
+import { Tooltip as g } from "../../tooltip/Tooltip.js";
+import { useBreadcrumbsContext as w } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as B } from "../Breadcrumbs.variant.js";
+const C = 25, l = ({ children: t, href: e }) => t.length > C ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), R = x(
+  (t, e) => {
+    const { wrap: d, isMobile: f, isStaticApi: p } = w(), { breadcrumb: o } = B({ wrap: d });
+    if (!t)
+      return null;
+    const { href: n, label: a, ...c } = t;
+    return f && !p ? /* @__PURE__ */ i(s, { ref: e, ...c, className: o(), children: [
+      /* @__PURE__ */ r(m, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
+      /* @__PURE__ */ r(l, { href: n, children: a })
+    ] }) : /* @__PURE__ */ r(s, { ref: e, ...c, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy:text-nowrap uy:text-content-neutral-lowest", children: a }) : /* @__PURE__ */ i(h, { children: [
+      /* @__PURE__ */ r(l, { href: n, children: a }),
+      /* @__PURE__ */ r(
+        m,
+        {
+          src: "CaretRightOutlined",
+          "aria-hidden": "true",
+          color: "content.neutral.lowest"
+        }
+      )
+    ] }) });
+  }
+);
+export {
+  R as Breadcrumb
+};

package/dist/esm/components/button/Button.d.ts

@@ -0,0 +1,45 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.js';
+type UnityButtonProps = AriaButtonProps & ButtonBase & {
+    /**
+     * The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
+     * @default 'primary'
+     */
+    variant: 'primary' | 'secondary' | 'ghost';
+    /**
+     * The button size. It can be full size or default size (min-content).
+     * @default 'default'
+     */
+    size?: ButtonBase['size'];
+    /**
+     * The button's color. It can be one of the following: 'primary', 'inverted'.
+     * @default 'primary'
+     */
+    color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
+    /**
+     * The button's prefix icon. It has to be one of the icons from the Unity Icons package.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * The loading state of the button.
+     * @default false
+     */
+    isLoading?: boolean;
+};
+type UnionButtonProps = (UnityButtonProps & {
+    variant: 'primary';
+} & ButtonFilled) | (UnityButtonProps & {
+    variant: 'secondary';
+} & ButtonOutlined) | (UnityButtonProps & {
+    variant: 'ghost';
+} & ButtonGhost);
+export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
+/**
+ * Buttons allow users to take actions, and make choices, with a single tap.
+ */
+declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style"> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/esm/components/button/Button.js

@@ -0,0 +1,67 @@
+import { jsx as m, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as x } from "react";
+import { uyMerge as l } from "@payfit/unity-themes";
+import { Button as b } from "react-aria-components";
+import { Icon as v } from "../icon/Icon.js";
+import { Spinner as B } from "../spinner/Spinner.js";
+import { buttonGhost as w, buttonOutlined as N, buttonFilled as j } from "./Button.variants.js";
+const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit", label: "Loading..." }) : n ? /* @__PURE__ */ m(v, { src: n, size: 20, color: "inherit", role: "presentation" }) : null, M = h(
+  ({
+    variant: e,
+    children: n,
+    color: o = "primary",
+    size: u = "default",
+    isDisabled: a = !1,
+    isLoading: t = !1,
+    prefixIcon: c = void 0,
+    ...i
+  }, p) => {
+    const f = x(() => {
+      const s = { size: u, isDisabled: a, isLoading: t };
+      switch (e) {
+        case "primary": {
+          const r = {
+            ...s,
+            color: o
+          };
+          return l(j(r));
+        }
+        case "secondary": {
+          const r = {
+            ...s,
+            color: o
+          };
+          return l(N(r));
+        }
+        case "ghost": {
+          const r = {
+            ...s,
+            color: o
+          };
+          return l(w(r));
+        }
+      }
+    }, [e, o, u, a, t]), d = {
+      ...t && { "data-loading": t }
+    };
+    return /* @__PURE__ */ m(
+      b,
+      {
+        "data-dd-privacy": "allow",
+        ...i,
+        ref: p,
+        isDisabled: a || t,
+        className: f,
+        ...d,
+        children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:leading-[1.75] uy:items-center", children: [
+          I(t, c),
+          n
+        ] })
+      }
+    );
+  }
+);
+M.displayName = "Button";
+export {
+  M as Button
+};

package/dist/esm/components/button/Button.variants.d.ts

@@ -0,0 +1,248 @@
+import { VariantProps } from '@payfit/unity-themes';
+declare const buttonBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const buttonFilled: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const buttonOutlined: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, "uy:border uy:border-solid", {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export type ButtonBase = VariantProps<typeof buttonBase>;
+export type ButtonFilled = VariantProps<typeof buttonFilled>;
+export type ButtonOutlined = VariantProps<typeof buttonOutlined>;
+export type ButtonGhost = VariantProps<typeof buttonGhost>;
+export {};

package/dist/esm/components/button/Button.variants.js

@@ -0,0 +1,157 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
+  base: [
+    "uy:group",
+    "uy:cursor-pointer uy:rounded-75 uy:px-200 uy:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+  ],
+  variants: {
+    isDisabled: {
+      true: "uy:disabled:cursor-not-allowed",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
+    },
+    size: {
+      default: "uy:w-auto uy:grow-0 uy:basis-auto",
+      full: "uy:grow-1 uy:w-full uy:basis-full"
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1,
+    isLoading: !1,
+    size: "default"
+  }
+}), r = e({
+  extend: t,
+  variants: {
+    color: {
+      primary: [
+        "uy:bg-surface-primary-enabled uy:text-content-inverted-enabled",
+        "uy:hover:bg-surface-primary-hover uy:hover:text-content-inverted-hover",
+        "uy:active:bg-surface-primary-active uy:active:text-content-inverted-hover",
+        "uy:data-[pressed]:bg-surface-primary-pressed uy:data-[pressed]:text-content-inverted-pressed"
+      ],
+      warning: [
+        "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
+        "uy:hover:bg-surface-warning-hover uy:hover:text-content-neutral-hover",
+        "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
+      ],
+      danger: [
+        "uy:bg-surface-danger-enabled uy:text-content-inverted-enabled",
+        "uy:hover:bg-surface-danger-hover uy:hover:text-content-inverted-hover",
+        "uy:active:bg-surface-danger-active uy:active:text-content-inverted",
+        "uy:data-[pressed]:bg-surface-danger-pressed uy:data-[pressed]:text-content-inverted"
+      ],
+      inverted: [
+        "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
+        "uy:hover:bg-surface-neutral-hover uy:hover:text-content-neutral-hover",
+        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
+        "uy:focus-visible:outline-utility-inverted-focus-ring uy:focus-visible:text-content-neutral-focus uy:focus-visible:bg-surface-neutral-focus"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:bg-surface-neutral-disabled uy:disabled:text-content-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:bg-surface-neutral-disabled uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
+    }
+  }
+}), n = e({
+  extend: t,
+  base: "uy:border uy:border-solid",
+  variants: {
+    color: {
+      primary: [
+        "uy:bg-transparent uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
+        "uy:hover:text-content-neutral-hover uy:hover:border-border-neutral-high-hover",
+        "uy:active:text-content-neutral-active uy:active:border-border-neutral-high-pressed",
+        "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:border-border-neutral-high-pressed",
+        "uy:focus-visible:border-border-neutral-high-focus uy:focus-visible:text-content-neutral-focus"
+      ],
+      inverted: [
+        "uy:bg-transparent uy:text-content-inverted uy:border-border-inverted-enabled",
+        "uy:focus-visible:outline-utility-inverted-focus-ring"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:border-border-neutral-disabled"
+    }
+  }
+}), u = e({
+  extend: t,
+  variants: {
+    color: {
+      primary: [
+        "uy:bg-transparent uy:text-content-primary-enabled",
+        "uy:enabled:hover:bg-surface-primary-lowest-hover uy:enabled:hover:text-content-primary-hover",
+        "uy:enabled:active:bg-surface-primary-lowest-active uy:enabled:active:text-content-primary-active",
+        "uy:enabled:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:enabled:data-[pressed=true]:text-content-primary-pressed",
+        "uy:focus-visible:bg-transparent"
+      ],
+      warning: [
+        "uy:bg-transparent uy:text-content-warning-enabled",
+        "uy:enabled:hover:bg-surface-warning-lowest-hover uy:enabled:hover:text-content-warning-hover",
+        "uy:enabled:active:bg-surface-warning-lowest-active uy:enabled:active:text-content-warning-active",
+        "uy:enabled:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:enabled:data-[pressed=true]:text-content-warning-pressed",
+        "uy:focus-visible:bg-transparent"
+      ],
+      danger: [
+        "uy:bg-transparent uy:text-content-danger-enabled",
+        "uy:enabled:hover:bg-surface-danger-lowest-hover uy:enabled:hover:text-content-danger-hover",
+        "uy:enabled:active:bg-surface-danger-lowest-active uy:enabled:active:text-content-danger-active",
+        "uy:enabled:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:enabled:data-[pressed=true]:text-content-danger-pressed",
+        "uy:focus-visible:bg-transparent"
+      ],
+      neutral: [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        "uy:enabled:hover:bg-surface-neutral-hover uy:enabled:hover:text-content-neutral-hover",
+        "uy:enabled:active:bg-surface-neutral-active uy:enabled:active:text-content-neutral-active",
+        "uy:enabled:data-[pressed=true]:bg-surface-neutral-pressed uy:enabled:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:focus-visible:bg-transparent"
+      ],
+      inverted: [
+        "uy:bg-transparent uy:text-content-inverted-enabled",
+        "uy:enabled:hover:bg-surface-inverted-hover uy:enabled:hover:text-content-inverted-hover",
+        "uy:enabled:active:bg-surface-inverted-active uy:enabled:active:text-content-inverted-active",
+        "uy:enabled:data-[pressed=true]:bg-surface-inverted-pressed uy:enabled:data-[pressed=true]:text-content-inverted-pressed",
+        "uy:focus-visible:outline-utility-inverted-focus-ring uy:focus-visible:bg-transparent"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:bg-transparent",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:bg-transparent",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      isDisabled: !0,
+      color: "inverted",
+      className: ["uy:disabled:text-content-inverted-disabled"]
+    },
+    {
+      isLoading: !0,
+      color: "inverted",
+      className: ["uy:data-[loading]:text-content-inverted-disabled"]
+    }
+  ]
+});
+export {
+  r as buttonFilled,
+  u as buttonGhost,
+  n as buttonOutlined
+};

package/dist/esm/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className'> {
+    /**
+     * The content to display as the checkbox label.
+     * This is required for accessibility.
+     */
+    children: ReactNode;
+    /**
+     * Additional text displayed below the checkbox to provide context or guidance.
+     * Can contain rich content like links or formatted text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message displayed when the checkbox is in an invalid state.
+     * Only shown when `isInvalid` is true.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Controls how the required state is displayed.
+     * - 'required': Shows an asterisk (*) when isRequired is true
+     * - 'optional': Shows "(optional)" text when isRequired is false
+     * @default 'required'
+     */
+    requiredVariant?: 'required' | 'optional';
+    /**
+     * Whether the checkbox is disabled.
+     * When true, the checkbox cannot be interacted with and appears dimmed.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is in a read-only state.
+     * When true, the checkbox cannot be modified but maintains normal appearance and can be focused.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Use this for form validation feedback.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the checkbox is required.
+     * This affects form validation and the display of required/optional indicators.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the checkbox is selected (controlled).
+     * Use this with `onChange` for controlled checkbox state.
+     */
+    isSelected?: boolean;
+    /**
+     * The default selected state (uncontrolled).
+     * Use this when you don't need to control the checkbox state.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Useful for parent checkboxes in a tree structure.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Handler called when the checkbox's selected state changes.
+     * @param isSelected The new selected state
+     */
+    onChange?: (isSelected: boolean) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * The name of the checkbox when used in a form.
+     */
+    name?: string;
+    /**
+     * The value of the checkbox when used in a form.
+     */
+    value?: string;
+}
+/**
+ * The `Checkbox` component is an accessible form control that allows users to select multiple options from a set.
+ * It follows WAI-ARIA checkbox patterns and is built on top of React Aria Components.
+ * @param {CheckboxProps} props - The props for the `Checkbox` component
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@payfit/unity-components'
+ *
+ * <Checkbox>Accept terms and conditions</Checkbox>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Checkbox };