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

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

@@ -1,356 +0,0 @@
-import { tv as e } from "tailwind-variants";
-const t = e({
-  slots: {
-    button: [
-      "uy-group",
-      "uy-w-500 uy-min-w-500 uy-h-500 uy-min-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: ""
-      }
-    }
-  },
-  defaultVariants: {
-    isDisabled: !1,
-    isLoading: !1
-  }
-}), n = e({
-  extend: t,
-  variants: {
-    variant: {
-      primary: ""
-    },
-    color: {
-      primary: "",
-      danger: "",
-      warning: "",
-      inverted: "focus-visible:uy-outline-utility-inverted-focus-ring"
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "primary",
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy-bg-surface-primary-enabled",
-          "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-enabled",
-          "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-enabled",
-          "hover:uy-bg-content-danger-hover",
-          "active:uy-bg-content-danger-active",
-          "focus:uy-bg-content-danger-focus",
-          "data-[pressed]:uy-bg-content-danger-pressed"
-        ],
-        icon: [
-          "uy-text-content-inverted-enabled",
-          "group-hover:uy-text-content-inverted-hover",
-          "active:uy-text-content-inverted-active",
-          "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"
-      }
-    }
-  ]
-}), a = e({
-  extend: t,
-  variants: {
-    variant: {
-      secondary: { button: "focus-visible:uy-outline-offset-4" }
-    },
-    color: {
-      primary: "",
-      inverted: "focus-visible:uy-outline-utility-inverted-focus-ring"
-    }
-  },
-  compoundVariants: [
-    {
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy-border uy-border-solid uy-border-border-primary-enabled",
-          "hover:uy-border-border-primary-hover",
-          "active:uy-border-border-primary-active",
-          "data-[pressed]:uy-border-border-primary-pressed"
-        ],
-        icon: [
-          "uy-text-content-primary-enabled",
-          "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"]
-      }
-    }
-  ]
-}), o = 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"]
-      }
-    },
-    {
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy-text-content-primary-enabled",
-          "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 {
-  o as iconButtonGhost,
-  n as iconButtonPrimary,
-  a as iconButtonSecondary
-};

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

@@ -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.js

@@ -1,149 +0,0 @@
-import { jsxs as n, jsx as e } 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.js";
-import { Icon as M } from "../icon/Icon.js";
-import { Spinner as O } from "../spinner/Spinner.js";
-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-75 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: i,
-    suffix: l,
-    isInvalid: f,
-    isLoading: r,
-    isDisabled: o,
-    isReadOnly: u,
-    onClearButtonPress: t,
-    ...a
-  }, y) => {
-    const d = I(), {
-      base: b,
-      prefix: m,
-      inputWrapper: c,
-      input: p,
-      state: x,
-      suffix: g
-    } = S({
-      isInvalid: !!f,
-      isReadOnly: !!u,
-      isDisabled: !!o
-    }), w = a.value && !r && !u && !o;
-    return delete a.isRequired, /* @__PURE__ */ n("div", { className: b(), children: [
-      i ? /* @__PURE__ */ e("span", { className: m(), children: i }) : null,
-      /* @__PURE__ */ n("div", { className: c(), children: [
-        /* @__PURE__ */ e(
-          h,
-          {
-            "data-dd-privacy": "mask",
-            ...a,
-            ref: y,
-            type: s,
-            className: p(),
-            "aria-busy": r,
-            readOnly: u,
-            disabled: o
-          }
-        ),
-        /* @__PURE__ */ n("div", { className: x(), children: [
-          r && /* @__PURE__ */ e(
-            O,
-            {
-              color: "inherit",
-              size: "small",
-              label: d.formatMessage({
-                id: "unity:component:common:loading:label",
-                defaultMessage: "Loading..."
-              })
-            }
-          ),
-          f && /* @__PURE__ */ e(
-            M,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: d.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          ),
-          w && /* @__PURE__ */ e(
-            W,
-            {
-              title: d.formatMessage({
-                id: "unity:component:common:clear:title",
-                defaultMessage: "Clear"
-              }),
-              className: "uy-text-content-neutral-enabled",
-              icon: "CloseOutlined",
-              onPress: () => {
-                t == null || t();
-              }
-            }
-          )
-        ] })
-      ] }),
-      l ? /* @__PURE__ */ e("span", { className: g(), children: l }) : null
-    ] });
-  }
-);
-j.displayName = "Input";
-export {
-  j as Input
-};

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

@@ -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.js

@@ -1,64 +0,0 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { mergeProps as b } from "react-aria";
-import { useSlottedContext as f, InputContext as g, Label as N } from "react-aria-components";
-import { useIntl as h } from "react-intl";
-import { tv as q } from "tailwind-variants";
-const x = q({
-  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"
-  }
-}), v = u(
-  ({ children: l, ...a }, i) => {
-    const t = h(), e = f(g), d = b(
-      { isRequired: e == null ? void 0 : e["aria-required"] },
-      a
-    ), {
-      isRequired: s = !1,
-      requiredVariant: o = "required",
-      ...p
-    } = d, { base: m, asterisk: y, optionalTag: c } = x();
-    return /* @__PURE__ */ r(
-      N,
-      {
-        "data-dd-privacy": "allow",
-        ...p,
-        ref: i,
-        className: m({ className: a.className }),
-        children: [
-          l,
-          o === "required" && s && /* @__PURE__ */ r("span", { className: y(), children: [
-            "*",
-            /* @__PURE__ */ n("span", { className: "uy-sr-only", children: t.formatMessage({
-              id: "unity:component:label:required",
-              defaultMessage: "required"
-            }) })
-          ] }),
-          o === "optional" && !s && /* @__PURE__ */ n("span", { className: c({ className: a.className }), children: t.formatMessage({
-            id: "unity:component:label:optional",
-            defaultMessage: "(optional)"
-          }) })
-        ]
-      }
-    );
-  }
-);
-v.displayName = "Label";
-export {
-  v as Label
-};