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

package/dist/esm/components/icon-button/IconButton.variants.mjs

@@ -1,242 +0,0 @@
-import { tv as e } from "tailwind-variants";
-const t = e({
-  slots: {
-    button: "uy-group uy-w-500 uy-h-500 uy-flex uy-justify-center uy-items-center uy-rounded-75 focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",
-    icon: "uy-w-250 uy-h-250"
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        button: "uy-cursor-not-allowed"
-      },
-      false: {
-        button: ""
-      }
-    },
-    isLoading: {
-      true: {
-        button: "uy-cursor-progress uy-text-content-neutral-disabled",
-        icon: ""
-      },
-      false: {
-        button: ""
-      }
-    },
-    color: {
-      inverted: {
-        button: "focus-visible:uy-outline-utility-inverted-focus-ring"
-      }
-    }
-  },
-  defaultVariants: {
-    isDisabled: !1,
-    isLoading: !1
-  }
-}), n = e({
-  extend: t,
-  variants: {
-    variant: {
-      primary: ""
-    },
-    color: {
-      primary: "",
-      danger: "",
-      warning: "",
-      inverted: ""
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "primary",
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "uy-bg-surface-primary hover:uy-bg-surface-primary-hover active:uy-bg-surface-primary-active focus-visible:uy-bg-surface-primary-focus data-[pressed]:uy-bg-surface-primary-pressed",
-        icon: "uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-active focus-visible:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"
-      }
-    },
-    {
-      variant: "primary",
-      color: "danger",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "uy-bg-content-danger hover:uy-bg-content-danger-hover active:uy-bg-content-danger-pressed focus:uy-bg-content-danger-focus data-[pressed]:uy-bg-content-danger-pressed",
-        icon: "uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-pressed focus:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"
-      }
-    },
-    {
-      variant: "primary",
-      color: "warning",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "uy-bg-content-warning hover:uy-bg-content-warning-hover active:uy-bg-content-warning-pressed focus-visible:uy-bg-content-warning-focus data-[pressed]:uy-bg-content-warning-pressed]:",
-        icon: "uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-pressed focus-visible:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"
-      }
-    },
-    {
-      variant: "primary",
-      color: "inverted",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "uy-bg-surface-inverted hover:uy-accent-surface-inverted-hover active:uy-accent-surface-inverted-pressed focus-visible:uy-accent-surface-inverted-focus data-[pressed]:uy-accent-surface-inverted-pressed",
-        icon: "uy-text-content-neutral group-hover:uy-text-content-neutral-hover active:uy-text-content-neutral-pressed focus-visible:uy-text-content-neutral-focus data-[pressed]:uy-text-content-neutral-pressed"
-      }
-    },
-    {
-      variant: "primary",
-      color: "primary",
-      isDisabled: !0,
-      isLoading: !1,
-      class: {
-        button: "uy-bg-surface-neutral-disabled",
-        icon: "uy-text-content-neutral-disabled"
-      }
-    },
-    {
-      variant: "primary",
-      color: ["primary", "danger", "warning", "inverted"],
-      isLoading: !0,
-      isDisabled: !1,
-      class: {
-        button: "uy-bg-surface-neutral-disabled",
-        icon: "uy-text-content-neutral-disabled"
-      }
-    }
-  ]
-}), o = e({
-  extend: t,
-  variants: {
-    variant: {
-      secondary: { button: "focus-visible:uy-outline-offset-4" }
-    },
-    color: {
-      primary: "",
-      inverted: ""
-    }
-  },
-  compoundVariants: [
-    {
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "uy-border uy-border-solid uy-border-border-primary hover:uy-border-border-primary-hover active:uy-border-border-primary-active data-[pressed]:uy-border-border-primary-pressed",
-        icon: "uy-text-content-primary group-hover:uy-text-content-primary-hover active:uy-text-content-primary-active data-[pressed]:uy-text-content-primary-pressed focus-visible:uy-text-content-primary-focus"
-      }
-    },
-    {
-      color: "primary",
-      isLoading: !0,
-      isDisabled: !1,
-      class: {
-        button: "uy-border uy-border-solid uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",
-        icon: "uy-text-content-neutral-disabled"
-      }
-    },
-    {
-      color: "primary",
-      isLoading: !1,
-      isDisabled: !0,
-      class: {
-        button: "uy-border uy-border-solid uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",
-        icon: "uy-text-content-neutral-disabled"
-      }
-    },
-    {
-      color: "inverted",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "uy-border uy-border-solid uy-border-border-inverted hover:uy-border-border-inverted-hover data-[pressed]:uy-border-border-inverted-pressed active:uy-border-border-inverted-active focus-visible:uy-border-border-inverted-focus",
-        icon: "uy-text-content-inverted group-hover:uy-text-content-inverted-hover data-[pressed]:uy-text-content-inverted-pressed active:uy-text-content-inverted-active focus-visible:uy-text-content-inverted-focus"
-      }
-    },
-    {
-      color: "inverted",
-      isLoading: !1,
-      isDisabled: !0,
-      class: {
-        button: "uy-border uy-border-solid uy-border-border-inverted-disabled focus-visible:uy-border-border-primary-focus",
-        icon: "uy-text-content-inverted-disabled"
-      }
-    }
-  ]
-}), a = e({
-  extend: t,
-  variants: {
-    variant: {
-      ghost: ""
-    },
-    color: {
-      neutral: "",
-      primary: "",
-      danger: "",
-      warning: ""
-    }
-  },
-  compoundVariants: [
-    {
-      color: "neutral",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "hover:uy-bg-surface-neutral-hover data-[pressed]:uy-bg-surface-neutral-pressed active:uy-bg-surface-neutral-active",
-        icon: "uy-text-content-neutral group-hover:uy-text-content-neutral-hover data-[pressed]:uy-text-content-neutral-pressed focus-visible:uy-text-content-neutral-focus active:uy-text-content-neutral-active"
-      }
-    },
-    {
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "hover:uy-bg-surface-primary-lowest-hover data-[pressed]:uy-bg-surface-primary-lowest-pressed active:uy-bg-surface-primary-lowest-active",
-        icon: "uy-text-content-primary group-hover:uy-text-content-primary data-[pressed]:uy-text-content-primary focus-visible:uy-text-content-primary active:uy-text-content-primary"
-      }
-    },
-    {
-      color: "danger",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "hover:uy-bg-surface-danger-lowest-hover data-[pressed]:uy-bg-surface-danger-lowest-pressed active:uy-bg-surface-danger-lowest-active",
-        icon: "uy-text-content-danger group-hover:uy-text-content-danger-hover data-[pressed]:uy-text-content-danger-pressed focus-visible:uy-text-content-danger-focus active:uy-text-content-danger-active"
-      }
-    },
-    {
-      color: "warning",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: "hover:uy-bg-surface-warning-lowest-hover data-[pressed]:uy-bg-surface-warning-lowest-pressed active:uy-bg-surface-warning-lowest-active",
-        icon: "uy-text-content-warning group-hover:uy-text-content-warning-hover data-[pressed]:uy-text-content-warning-pressed focus-visible:uy-text-content-warning-focus active:uy-text-content-warning-active"
-      }
-    },
-    {
-      color: ["primary", "neutral", "danger", "warning"],
-      isDisabled: !0,
-      isLoading: !1,
-      class: {
-        button: "",
-        icon: "uy-text-content-neutral-disabled"
-      }
-    },
-    {
-      color: ["primary", "neutral", "danger", "warning"],
-      isDisabled: !1,
-      isLoading: !0,
-      class: {
-        button: "",
-        icon: "uy-text-content-neutral-disabled"
-      }
-    }
-  ]
-});
-export {
-  a as iconButtonGhost,
-  n as iconButtonPrimary,
-  o as iconButtonSecondary
-};

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

@@ -1,48 +0,0 @@
-import { ReactElement } from 'react';
-import { InputProps as AriaInputProps } from 'react-aria-components';
-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.mjs

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

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

@@ -1,17 +0,0 @@
-import { LabelProps as AriaLabelProps } from 'react-aria-components';
-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.mjs

@@ -1,57 +0,0 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { mergeProps as u } from "react-aria";
-import { useSlottedContext as b, InputContext as g, Label as f } from "react-aria-components";
-import { tv as N } from "tailwind-variants";
-const h = N({
-  slots: {
-    base: "uy-typography-body-strong uy-text-content-form-enabled uy-flex uy-gap-25",
-    asterisk: "uy-text-content-danger",
-    optionalTag: "uy-typography-body"
-  },
-  variants: {
-    variant: {
-      strong: {
-        base: "uy-typography-body-strong"
-      },
-      body: {
-        base: "uy-typography-body"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "strong"
-  }
-}), q = m(
-  ({ children: n, ...a }, l) => {
-    const e = b(g), i = u(
-      { isRequired: e == null ? void 0 : e["aria-required"] },
-      a
-    ), {
-      isRequired: r = !1,
-      requiredVariant: s = "required",
-      ...d
-    } = i, { base: p, asterisk: y, optionalTag: c } = h();
-    return /* @__PURE__ */ o(
-      f,
-      {
-        "data-dd-privacy": "allow",
-        ...d,
-        ref: l,
-        className: p({ className: a.className }),
-        children: [
-          n,
-          s === "required" && r && /* @__PURE__ */ o("span", { className: y(), children: [
-            "*",
-            /* @__PURE__ */ t("span", { className: "uy-sr-only", children: "required" })
-          ] }),
-          s === "optional" && !r && /* @__PURE__ */ t("span", { className: c({ className: a.className }), children: "(optional)" })
-        ]
-      }
-    );
-  }
-);
-q.displayName = "Label";
-export {
-  q as Label
-};

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

@@ -1,73 +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.mjs';
-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;
-    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;
-    maxCharactersTruncation?: number;
-} & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLAnchorElement>>;
-export { Link };

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

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