@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,356 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,64 @@
+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
+};