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

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

@@ -0,0 +1,536 @@
+import { VariantProps } from 'tailwind-variants';
+declare const buttonBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, import('tailwind-variants/dist/config').TVConfig<{
+    color: {
+        primary: string;
+        warning: string;
+        danger: string;
+        inverted: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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", import('tailwind-variants/dist/config').TVConfig<{
+    color: {
+        primary: string;
+        inverted: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    color: {
+        primary: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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, "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring", import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: 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.mjs

@@ -0,0 +1,80 @@
+import { tv as e } from "tailwind-variants";
+const a = e({
+  base: "uy-group 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 focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",
+  variants: {
+    isDisabled: {
+      true: "disabled:uy-cursor-not-allowed",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-cursor-progress data-[loading]:uy-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: a,
+  variants: {
+    color: {
+      primary: "uy-bg-surface-primary uy-text-content-inverted hover:uy-bg-surface-primary-hover active:uy-bg-surface-primary-active data-[pressed]:uy-bg-surface-primary-active",
+      warning: "uy-bg-surface-warning uy-text-content-inverted hover:uy-bg-surface-warning-hover active:uy-bg-surface-warning-active data-[pressed]:uy-bg-surface-warning-active",
+      danger: "uy-bg-surface-danger uy-text-content-inverted hover:uy-bg-surface-danger-hover active:uy-bg-surface-danger-active data-[pressed]:uy-bg-surface-danger-active",
+      inverted: "uy-bg-surface-inverted uy-text-content-neutral hover:uy-bg-surface-inverted-hover active:uy-bg-surface-inverted-active data-[pressed]:uy-bg-surface-inverted-active focus-visible:uy-outline-utility-inverted-focus-ring"
+    },
+    isDisabled: {
+      true: "disabled:uy-bg-surface-neutral-disabled disabled:uy-text-content-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-bg-surface-neutral-disabled data-[loading]:uy-text-content-neutral-disabled",
+      false: ""
+    }
+  }
+}), u = e({
+  extend: a,
+  base: "uy-border",
+  variants: {
+    color: {
+      primary: "uy-bg-transparent uy-text-content-primary-enabled uy-border-border-primary-enabled",
+      inverted: "uy-bg-transparent uy-text-content-inverted uy-border-border-inverted-enabled focus-visible:uy-outline-utility-inverted-focus-ring"
+    },
+    isDisabled: {
+      true: "disabled:uy-text-content-neutral-disabled disabled:uy-border-border-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-text-content-neutral-disabled data-[loading]:uy-border-border-neutral-disabled"
+    }
+  }
+}), n = e({
+  extend: a,
+  variants: {
+    color: {
+      primary: "uy-bg-transparent uy-text-content-primary-enabled enabled:hover:uy-bg-surface-primary-lowest-hover active:uy-bg-surface-primary-lowest-active data-[pressed]:uy-bg-surface-primary-lowest-active focus-visible:uy-bg-transparent",
+      warning: "uy-bg-transparent uy-text-content-warning-enabled enabled:hover:uy-bg-surface-warning-lowest-hover active:uy-bg-surface-warning-lowest-active data-[pressed]:uy-bg-surface-warning-lowest-active focus-visible:uy-bg-transparent",
+      danger: "uy-bg-transparent uy-text-content-danger-enabled enabled:hover:uy-bg-surface-danger-lowest-hover active:uy-bg-surface-danger-lowest-active data-[pressed]:uy-bg-surface-danger-lowest-active focus-visible:uy-bg-transparent",
+      neutral: "uy-bg-transparent uy-text-content-neutral-enabled enabled:hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-active focus-visible:uy-bg-transparent"
+    },
+    isDisabled: {
+      true: "disabled:uy-text-content-neutral-disabled disabled:uy-bg-transparent",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-text-content-neutral-disabled data-[loading]:uy-bg-transparent",
+      false: ""
+    }
+  }
+});
+export {
+  r as buttonFilled,
+  n as buttonGhost,
+  u as buttonOutlined
+};

package/dist/esm/components/dialog/Dialog.d.mts

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import { DialogTrigger } from 'react-aria-components';
+interface DialogProps {
+    /** aria-label has to be defined if the dialog does not have a visible label*/
+    'aria-label'?: string;
+    /** (optional) modal opened by default or not **If it is set to true, the closing should be handled from outside** /*/
+    isOpen?: boolean;
+    /** it is used for controlled mode (need to be used with isOpen property) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** if false it does not allow to close the modal when click outside, default: true*/
+    isDismissable?: boolean;
+}
+/**
+ * The `Dialog` is the container component for the dialog, it will contain the different parts of the dialog:
+ * - `DialogTitle`: It contains the title of the dialog
+ * - `DialogContent`: It contains the content of the dialog, **this component has to be defined**
+ * - `DialogActions`: It contains the action buttons
+ * - `DialogButton`: It can be:
+ *  - `close`: The one in charge to close the modal
+ *  - `confirm`: The one in charge to trigger an action
+ *  - `danger`: The one in charge to trigger a dangerous action
+ *
+ *
+ * **If the title is not a visible label, the `aria-abel` property has to be defined**
+ */
+export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: PropsWithChildren<DialogProps>): JSX.Element;
+export declare namespace Dialog {
+    var displayName: string;
+}
+export { DialogTrigger };

package/dist/esm/components/dialog/Dialog.mjs

@@ -0,0 +1,49 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Children as l, isValidElement as t } from "react";
+import { useId as y } from "react-aria";
+import { ModalOverlay as s, Modal as d, DialogContext as m, Dialog as f } from "react-aria-components";
+import { DialogTrigger as A } from "react-aria-components";
+import { DialogActions as g } from "./parts/DialogActions.mjs";
+import { DialogButton as p } from "./parts/DialogActions/DialogButton.mjs";
+const c = (r) => {
+  const a = l.toArray(r).find(
+    (e) => t(e) && e.type === g
+  );
+  return t(a) ? l.toArray(a.props.children).some(
+    (e) => t(e) && e.type === p && e.props.variant === "danger"
+  ) : !1;
+};
+function b({
+  children: r,
+  isOpen: a,
+  onOpenChange: e,
+  isDismissable: u = !0,
+  ...n
+}) {
+  const i = y();
+  return /* @__PURE__ */ o(
+    s,
+    {
+      isDismissable: u,
+      isOpen: a,
+      onOpenChange: e,
+      className: "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto uy-flex uy-min-h-full uy-items-center uy-justify-center uy-text-center uy-backdrop-blur-sm uy-bg-utility-backdrop/65",
+      children: /* @__PURE__ */ o(d, { className: "uy-bg-surface-neutral uy-max-w-[640px] uy-overflow-hidden uy-rounded-200 uy-bg-white uy-p-400 uy-text-left uy-align-middle uy-shadow-floating", children: /* @__PURE__ */ o(m.Provider, { value: { "aria-describedby": i }, children: /* @__PURE__ */ o(
+        f,
+        {
+          role: c(r) ? "alertdialog" : "dialog",
+          "aria-modal": "true",
+          className: "uy-outline-none uy-relative uy-flex uy-flex-col uy-gap-400",
+          "aria-label": n["aria-label"],
+          "aria-describedby": i,
+          children: r
+        }
+      ) }) })
+    }
+  );
+}
+b.displayName = "Dialog";
+export {
+  b as Dialog,
+  A as DialogTrigger
+};

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.d.mts

@@ -0,0 +1,18 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../../../button/Button.mjs';
+export interface DialogButtonProps extends Omit<ButtonProps, 'variant' | 'color'> {
+    /** the different variants for the button */
+    variant: 'close' | 'confirm' | 'danger';
+    /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
+    icon?: UnityIcon;
+}
+/**
+ * A `DialogButton` is a button which has to be included into `DialogActions` container
+ *
+ */
+declare const DialogButton: {
+    ({ children, variant, onPress, icon, }: PropsWithChildren<DialogButtonProps>): JSX.Element;
+    displayName: string;
+};
+export { DialogButton };