@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

package/dist/esm/components/text/Text.variants.d.ts

@@ -0,0 +1,292 @@
+export declare const text: import('tailwind-variants').TVReturnType<{
+    variant: {
+        inherit: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        overline: string;
+        subtitle: string;
+        displayTitle: string;
+        displayBody: string;
+        body: string;
+        bodyStrong: string;
+        bodySmall: string;
+        bodySmallStrong: string;
+        bodyLarge: string;
+        bodyLargeStrong: string;
+        action: string;
+        actionLarge: string;
+        actionSmall: string;
+        actionInfo: string;
+    };
+    color: {
+        inherit: string;
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+    };
+    isTruncated: {
+        true: string;
+    };
+    isLineClamped: {
+        true: string;
+    };
+}, undefined, "", {
+    variant: {
+        inherit: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        overline: string;
+        subtitle: string;
+        displayTitle: string;
+        displayBody: string;
+        body: string;
+        bodyStrong: string;
+        bodySmall: string;
+        bodySmallStrong: string;
+        bodyLarge: string;
+        bodyLargeStrong: string;
+        action: string;
+        actionLarge: string;
+        actionSmall: string;
+        actionInfo: string;
+    };
+    color: {
+        inherit: string;
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+    };
+    isTruncated: {
+        true: string;
+    };
+    isLineClamped: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        inherit: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        overline: string;
+        subtitle: string;
+        displayTitle: string;
+        displayBody: string;
+        body: string;
+        bodyStrong: string;
+        bodySmall: string;
+        bodySmallStrong: string;
+        bodyLarge: string;
+        bodyLargeStrong: string;
+        action: string;
+        actionLarge: string;
+        actionSmall: string;
+        actionInfo: string;
+    };
+    color: {
+        inherit: string;
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+    };
+    isTruncated: {
+        true: string;
+    };
+    isLineClamped: {
+        true: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/esm/components/text/Text.variants.js

@@ -0,0 +1,109 @@
+import { tv as t } from "tailwind-variants";
+const n = t({
+  base: "",
+  variants: {
+    variant: {
+      inherit: "",
+      h1: "uy:typography-h1",
+      h2: "uy:typography-h2",
+      h3: "uy:typography-h3",
+      h4: "uy:typography-h4",
+      overline: "uy:typography-overline",
+      subtitle: "uy:typography-subtitle",
+      displayTitle: "uy:typography-display-title",
+      displayBody: "uy:typography-display-body",
+      body: "uy:typography-body",
+      bodyStrong: "uy:typography-body-strong",
+      bodySmall: "uy:typography-body-small",
+      bodySmallStrong: "uy:typography-body-small-strong",
+      bodyLarge: "uy:typography-body-large",
+      bodyLargeStrong: "uy:typography-body-large-strong",
+      action: "uy:typography-action",
+      actionLarge: "uy:typography-body-large",
+      actionSmall: "uy:typography-body-small",
+      actionInfo: "uy:typography-action uy:underline uy:decoration-dotted uy:decoration-[10%] uy:underline-offset-[25%]"
+    },
+    color: {
+      inherit: "uy:text-inherit",
+      "content.primary": "uy:text-content-primary",
+      "content.primary.enabled": "uy:text-content-primary-enabled",
+      "content.primary.hover": "uy:text-content-primary-hover",
+      "content.primary.pressed": "uy:text-content-primary-pressed",
+      "content.primary.focus": "uy:text-content-primary-focus",
+      "content.primary.active": "uy:text-content-primary-active",
+      "content.primary.disabled": "uy:text-content-primary-disabled",
+      "content.neutral": "uy:text-content-neutral",
+      "content.neutral.enabled": "uy:text-content-neutral-enabled",
+      "content.neutral.hover": "uy:text-content-neutral-hover",
+      "content.neutral.pressed": "uy:text-content-neutral-pressed",
+      "content.neutral.focus": "uy:text-content-neutral-focus",
+      "content.neutral.active": "uy:text-content-neutral-active",
+      "content.neutral.disabled": "uy:text-content-neutral-disabled",
+      "content.neutral.low": "uy:text-content-neutral-low",
+      "content.neutral.lowest": "uy:text-content-neutral-lowest",
+      "content.neutral.lowest.enabled": "uy:text-content-neutral-lowest-enabled",
+      "content.neutral.lowest.hover": "uy:text-content-neutral-lowest-hover",
+      "content.neutral.lowest.pressed": "uy:text-content-neutral-lowest-pressed",
+      "content.neutral.lowest.focus": "uy:text-content-neutral-lowest-focus",
+      "content.neutral.lowest.active": "uy:text-content-neutral-lowest-active",
+      "content.neutral.lowest.disabled": "uy:text-content-neutral-lowest-disabled",
+      "content.danger": "uy:text-content-danger",
+      "content.danger.enabled": "uy:text-content-danger-enabled",
+      "content.danger.hover": "uy:text-content-danger-hover",
+      "content.danger.pressed": "uy:text-content-danger-pressed",
+      "content.danger.focus": "uy:text-content-danger-focus",
+      "content.danger.active": "uy:text-content-danger-active",
+      "content.danger.disabled": "uy:text-content-danger-disabled",
+      "content.warning": "uy:text-content-warning",
+      "content.warning.enabled": "uy:text-content-warning-enabled",
+      "content.warning.hover": "uy:text-content-warning-hover",
+      "content.warning.pressed": "uy:text-content-warning-pressed",
+      "content.warning.focus": "uy:text-content-warning-focus",
+      "content.warning.active": "uy:text-content-warning-active",
+      "content.warning.disabled": "uy:text-content-warning-disabled",
+      "content.success": "uy:text-content-success",
+      "content.success.enabled": "uy:text-content-success-enabled",
+      "content.success.hover": "uy:text-content-success-hover",
+      "content.success.pressed": "uy:text-content-success-pressed",
+      "content.success.focus": "uy:text-content-success-focus",
+      "content.success.active": "uy:text-content-success-active",
+      "content.success.disabled": "uy:text-content-success-disabled",
+      "content.info": "uy:text-content-info",
+      "content.info.enabled": "uy:text-content-info-enabled",
+      "content.info.hover": "uy:text-content-info-hover",
+      "content.info.pressed": "uy:text-content-info-pressed",
+      "content.info.focus": "uy:text-content-info-focus",
+      "content.info.active": "uy:text-content-info-active",
+      "content.info.disabled": "uy:text-content-info-disabled",
+      "content.promo": "uy:text-content-promo",
+      "content.form.enabled": "uy:text-content-form",
+      "content.form.hover": "uy:text-content-form-hover",
+      "content.form.pressed": "uy:text-content-form-pressed",
+      "content.form.focus": "uy:text-content-form-focus",
+      "content.form.active": "uy:text-content-form-active",
+      "content.form.disabled": "uy:text-content-form-disabled",
+      "content.form.read-only": "uy:text-content-form-read-only",
+      "content.form.invalid": "uy:text-content-form-invalid",
+      "content.inverted": "uy:text-content-inverted",
+      "content.inverted.enabled": "uy:text-content-inverted-enabled",
+      "content.inverted.hover": "uy:text-content-inverted-hover",
+      "content.inverted.pressed": "uy:text-content-inverted-pressed",
+      "content.inverted.focus": "uy:text-content-inverted-focus",
+      "content.inverted.active": "uy:text-content-inverted-active",
+      "content.inverted.disabled": "uy:text-content-inverted-disabled"
+    },
+    isTruncated: {
+      true: "uy:block uy:truncate"
+    },
+    isLineClamped: {
+      true: "uy:line-clamp-[var(--uy-text-line-clamp)]"
+    }
+  },
+  defaultVariants: {
+    variant: "body",
+    isTruncated: !1
+  }
+});
+export {
+  n as text
+};

package/dist/esm/components/text-area/TextArea.d.ts

@@ -0,0 +1,128 @@
+import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components';
+export declare const textArea: import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    state: string;
+    resizeHandle: string;
+}, undefined, {
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    state: string;
+    resizeHandle: string;
+}, import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    state: string;
+    resizeHandle: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface TextAreaProps extends AriaTextAreaProps {
+    /** 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;
+    /** Whether the textarea is resizable */
+    isResizable?: boolean;
+}
+/**
+ * The `TextArea` component displays a styled, single HTML `<textarea>` field that 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 {TextAreaProps} props - Regular props from the `<textarea>` HTML element, plus state-related props
+ * @see {@link TextAreaProps} for all available props
+ * @example
+ * ```tsx
+ * import { Input } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [value, setValue] = useState()
+ *
+ *   const handleTextChange = (e) => {
+ *     setValue(e.target.value)
+ *   }
+ *
+ *   return (
+ *    <TextArea
+ *      id="my-text-area"
+ *      isResizable cols={50} rows={5} onChange={handleTextChange}
+ *    >
+ *      {value}
+ *    </TextArea>
+ * }
+ * ```
+ */
+declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { TextArea };

package/dist/esm/components/text-area/TextArea.js

@@ -0,0 +1,163 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { TextArea as w } from "react-aria-components";
+import { useIntl as M } from "react-intl";
+import { tv as z } from "tailwind-variants";
+import { useResizable as L } from "../../hooks/use-resizable.js";
+import { Icon as D } from "../icon/Icon.js";
+import { Spinner as N } from "../spinner/Spinner.js";
+const W = z({
+  slots: {
+    base: "uy:flex uy:border uy:border-solid uy:rounded-100 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100",
+    input: "uy:flex-grow uy:flex-shrink uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:resize-none",
+    state: "uy:flex uy:gap-50 uy:flex-shrink-0 uy:basis-250",
+    resizeHandle: "uy:absolute uy:bottom-25 uy:right-25 uy:w-100 uy:h-100 uy:cursor-se-resize uy:flex uy:items-center uy:justify-center"
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error",
+        inputWrapper: "uy:bg-surface-form-error",
+        input: "uy:bg-surface-form-error",
+        state: "uy:text-content-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-readonly"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+        input: "uy:bg-surface-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",
+        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"
+      }
+    }
+  ],
+  defaultVariants: {
+    isInvalid: !1,
+    isDisabled: !1,
+    isReadOnly: !1
+  }
+}), k = v(
+  ({
+    isInvalid: n,
+    isLoading: s,
+    isDisabled: a,
+    isReadOnly: r,
+    isResizable: i = !1,
+    ...y
+  }, b) => {
+    const o = M(), { containerRef: l, handleResizeStart: m } = L({
+      isDisabled: !i || a || r
+    }), { base: c, inputWrapper: p, input: g, state: x, resizeHandle: h } = W({
+      isInvalid: n,
+      isDisabled: a,
+      isReadOnly: r
+    });
+    return /* @__PURE__ */ t("div", { ref: l, className: c(), children: [
+      /* @__PURE__ */ t("div", { className: p(), children: [
+        /* @__PURE__ */ e(
+          w,
+          {
+            "data-dd-privacy": "mask",
+            ...y,
+            ref: b,
+            className: g(),
+            "aria-busy": s,
+            readOnly: r
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: x(), children: [
+          s && /* @__PURE__ */ e(
+            N,
+            {
+              color: "inherit",
+              size: "small",
+              label: o.formatMessage({
+                id: "unity:component:form-field:form-input:spinner:label",
+                defaultMessage: "Loading"
+              })
+            }
+          ),
+          n && /* @__PURE__ */ e(
+            D,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: o.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          )
+        ] })
+      ] }),
+      i && !a && !r && /* @__PURE__ */ e(
+        "div",
+        {
+          className: h(),
+          onMouseDown: m,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": o.formatMessage({
+            id: "unity:component:form-field:textarea:resize-handle:label",
+            defaultMessage: "Resize textarea"
+          }),
+          onKeyDown: (u) => {
+            var d, f;
+            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (f = (d = l.current) == null ? void 0 : d.querySelector("textarea")) == null || f.focus());
+          },
+          children: /* @__PURE__ */ t(
+            "svg",
+            {
+              role: "presentation",
+              width: "8",
+              height: "8",
+              viewBox: "0 0 8 8",
+              fill: "none",
+              children: [
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M0.72774 8L0 7.28745L7.27226 0L8 0.712547L0.72774 8Z",
+                    fill: "#8B8D98"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M4.73172 8L4 7.27073L7.26828 4L8 4.72927L4.73172 8Z",
+                    fill: "#8B8D98"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+k.displayName = "TextArea";
+export {
+  k as TextArea,
+  W as textArea
+};