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

package/dist/esm/components/actionable/Actionable.d.ts

@@ -0,0 +1,14 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+export interface ActionableProps extends AriaButtonProps {
+    /** Additional class names to apply to the actionable */
+    className?: string;
+    /** set to true to remove the Actionable's base styles */
+    isUnstyled?: boolean;
+    /** The HTML element to render the actionable as. */
+    asElement?: 'span' | 'div';
+}
+/**
+ * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
+ */
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Actionable };

package/dist/esm/components/actionable/Actionable.js

@@ -0,0 +1,72 @@
+import { jsx as D } from "react/jsx-runtime";
+import { forwardRef as H, useState as k } from "react";
+import { useFocusVisible as F, useHover as E, useFocus as w } from "@react-aria/interactions";
+import { useObjectRef as x, mergeProps as c } from "@react-aria/utils";
+import { useButton as N } from "react-aria";
+import { twMerge as S } from "tailwind-merge";
+import { tv as U } from "tailwind-variants";
+const V = U({
+  base: "uy:group uy:cursor-pointer",
+  variants: {
+    isUnstyled: {
+      true: "",
+      false: "uy:aria-disabled:cursor-not-allowed uy:aria-disabled:text-content-neutral-disabled"
+    }
+  },
+  defaultVariants: {
+    isUnstyled: !1
+  }
+}), j = H((d, s) => {
+  const {
+    asElement: r = "div",
+    isUnstyled: u = !1,
+    className: m,
+    children: o,
+    ...e
+  } = d;
+  s = x(s);
+  const { isFocusVisible: p } = F(), { isHovered: f, hoverProps: i } = E({
+    onHoverStart: e.onHoverStart,
+    onHoverEnd: e.onHoverEnd,
+    onHoverChange: e.onHoverChange,
+    isDisabled: e.isDisabled
+  }), [b, g] = k(!1), { focusProps: n } = w({
+    onFocusChange: g,
+    isDisabled: e.isDisabled
+  }), { buttonProps: a, isPressed: v } = N(
+    {
+      ...e,
+      elementType: r
+    },
+    s
+  ), y = r, P = (t) => {
+    if (e.isDisabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    const l = c(a, i, n);
+    l.onClick && l.onClick(t);
+  }, C = c(a, i, n), { onClick: A, ...h } = C;
+  return /* @__PURE__ */ D(
+    y,
+    {
+      ...h,
+      onClick: P,
+      className: S(V({ isUnstyled: u }), m),
+      ref: s,
+      children: typeof o == "function" ? o({
+        isHovered: f,
+        isPressed: v,
+        isFocused: b,
+        isDisabled: !!e.isDisabled,
+        isFocusVisible: p,
+        isPending: !1,
+        defaultChildren: null
+      }) : o
+    }
+  );
+});
+j.displayName = "Actionable";
+export {
+  j as Actionable
+};

package/dist/esm/components/alert/Alert.d.ts

@@ -0,0 +1,95 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alert: import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type BaseAlertProps = PropsWithChildren<{
+    /**
+     * The alert's variant, which determines its visual style.
+     */
+    variant: NonNullable<VariantProps<typeof alert>['variant']>;
+}>;
+type DismissableConfig = {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable?: false;
+    onDismiss?: never;
+    dismissButtonLabel?: never;
+} | {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable: true;
+    /**
+     * Callback function to handle the alert's dismissal behavior.
+     */
+    onDismiss: () => void;
+    /**
+     * Label for the close button.
+     */
+    dismissButtonLabel: string;
+};
+export type AlertProps = BaseAlertProps & DismissableConfig;
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app. They can provide feedback, confirmations, warnings, or errors.
+ */
+declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/esm/components/alert/Alert.js

@@ -0,0 +1,78 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { tv as g } from "tailwind-variants";
+import { CircularIconButton as m } from "../icon-button/CircularIconButton.js";
+import { Icon as p } from "../icon/Icon.js";
+const w = g({
+  slots: {
+    base: "uy:p-200 uy:flex uy:gap-200 uy:border uy:border-solid uy:rounded-100",
+    content: "uy:flex uy:flex-col uy:flex-1 uy:gap-200 uy:pt-50 uy:pb-100",
+    icon: "uy:mt-50"
+  },
+  variants: {
+    variant: {
+      info: {
+        base: "uy:bg-surface-info-lowest uy:border-border-info-lowest"
+      },
+      warning: {
+        base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest"
+      },
+      success: {
+        base: "uy:bg-surface-success-lowest uy:border-border-success-lowest"
+      },
+      danger: {
+        base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+}), v = {
+  info: { src: "InfoFilled", color: "content.info" },
+  warning: { src: "WarningFilled", color: "content.warning" },
+  success: { src: "CheckCircleFilled", color: "content.success" },
+  danger: { src: "WarningCircleFilled", color: "content.danger" }
+}, x = b(
+  ({
+    children: o,
+    variant: e,
+    isDismissable: s,
+    onDismiss: n,
+    dismissButtonLabel: a,
+    ...t
+  }, c) => {
+    const { base: i, content: l, icon: u } = w({ variant: e }), d = v[e], y = {
+      role: e === "danger" ? "alert" : "status",
+      "aria-live": e === "danger" ? "assertive" : "polite",
+      "aria-atomic": !0,
+      "aria-relevant": "additions removals"
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        "data-dd-privacy": "mask",
+        ref: c,
+        className: i(),
+        ...y,
+        ...t,
+        children: [
+          /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(p, { size: 24, ...d, alt: `${e} alert` }) }),
+          /* @__PURE__ */ r("section", { className: l(), children: o }),
+          s && /* @__PURE__ */ r(
+            m,
+            {
+              title: a,
+              icon: "CloseOutlined",
+              onPress: n
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "Alert";
+export {
+  x as Alert
+};

package/dist/esm/components/alert/parts/AlertActions.d.ts

@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alertActions: import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy:flex uy:gap-100", {
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy:flex uy:gap-100", unknown, unknown, undefined>>;
+export type AlertActionsProps = PropsWithChildren<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>['direction'];
+}>;
+declare const AlertActions: import('react').ForwardRefExoticComponent<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>["direction"];
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertActions };

package/dist/esm/components/alert/parts/AlertActions.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { tv as i } from "tailwind-variants";
+const l = i({
+  base: "uy:flex uy:gap-100",
+  variants: {
+    direction: {
+      row: "uy:flex-row",
+      column: "uy:flex-col"
+    }
+  },
+  defaultVariants: {
+    direction: "column"
+  }
+}), n = a(
+  ({ children: o, direction: r = "column" }, t) => /* @__PURE__ */ e("footer", { ref: t, className: l({ direction: r }), children: o })
+);
+n.displayName = "AlertActions";
+export {
+  n as AlertActions
+};

package/dist/esm/components/alert/parts/AlertContent.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Text as n } from "../../text/Text.js";
+const a = m(
+  ({ children: r, ...t }, o) => /* @__PURE__ */ e(n, { variant: "body", ref: o, ...t, children: r })
+);
+a.displayName = "AlertContent";
+export {
+  a as AlertContent
+};

package/dist/esm/components/alert/parts/AlertTitle.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Text as m } from "../../text/Text.js";
+const l = i(
+  ({ children: e, asElement: t = "h3", ...o }, a) => /* @__PURE__ */ r("header", { children: /* @__PURE__ */ r(
+    m,
+    {
+      variant: "h4",
+      asElement: t,
+      ref: a,
+      className: "uy:pt-50",
+      ...o,
+      children: e
+    }
+  ) })
+);
+l.displayName = "AlertTitle";
+export {
+  l as AlertTitle
+};

package/dist/esm/components/anchor/Anchor.js

@@ -0,0 +1,49 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { useMemo as h, cloneElement as n } from "react";
+import { tv as f } from "tailwind-variants";
+const m = f({
+  slots: {
+    root: "uy:relative uy:inline-block uy:leading-[0]",
+    main: "uy:relative uy:leading-[0]",
+    anchor: "uy:absolute uy:leading-[0] uy:scale-100"
+  },
+  variants: {
+    position: {
+      "top-left": {
+        anchor: "uy:origin-top-left uy:-translate-x-1/2 uy:-translate-y-1/2 uy:-top-[var(--anchor-offset-y)] uy:-left-[var(--anchor-offset-x)]"
+      },
+      "top-right": {
+        anchor: "uy:origin-top-right uy:translate-x-1/2 uy:-translate-y-1/2 uy:-top-[var(--anchor-offset-y)] uy:-right-[var(--anchor-offset-x)]"
+      },
+      "bottom-right": {
+        anchor: "uy:origin-bottom-right uy:translate-x-1/2 uy:translate-y-1/2 uy:-bottom-[var(--anchor-offset-x)] uy:-right-[var(--anchor-offset-y)]"
+      },
+      "bottom-left": {
+        anchor: "uy:origin-bottom-left uy:-translate-x-1/2 uy:translate-y-1/2 uy:-bottom-[var(--anchor-offset-x)] uy:-left-[var(--anchor-offset-y)]"
+      }
+    }
+  }
+}), p = ({
+  children: e,
+  position: y = "top-right",
+  offset: t = 0
+}) => {
+  const [o, r] = e;
+  if (!o || !r)
+    throw new Error("Badge component requires exactly 2 children");
+  const i = h(() => Array.isArray(t) ? {
+    "--anchor-offset-x": `${t[0]}px`,
+    "--anchor-offset-y": `${t[1]}px`
+  } : {
+    "--anchor-offset-x": `${t}px`,
+    "--anchor-offset-y": `${t}px`
+  }, [t]), { root: l, main: s, anchor: c } = m({ position: y });
+  return /* @__PURE__ */ u("div", { className: l(), style: i, children: [
+    /* @__PURE__ */ a("div", { className: s(), children: n(o) }),
+    /* @__PURE__ */ a("div", { className: c(), children: n(r) })
+  ] });
+};
+p.displayName = "Anchor";
+export {
+  p as Anchor
+};

package/dist/esm/components/app-layout/AppLayout.js

@@ -0,0 +1,77 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useRef as v } from "react";
+import { tv as x } from "tailwind-variants";
+import { useResizeObserver as g } from "usehooks-ts";
+const w = x({
+  slots: {
+    body: "uy:h-screen uy:relative uy:overflow-hidden",
+    header: "uy:fixed uy:top-0 uy:left-0 uy:right-0 uy:z-30",
+    layoutWrapper: [
+      "uy:flex uy:flex-col uy:w-full uy:mt-(--uy-app-layout-header-sticky-offset) uy:h-(--uy-app-layout-menu-height)",
+      "uy:md:flex-row"
+    ],
+    menu: ["uy:w-full", "uy:md:max-w-app-menu"],
+    contentWrapper: [
+      "uy:flex uy:flex-col",
+      "uy:flex-grow uy:overflow-y-auto uy:relative",
+      // Remove padding when it contains a Page component
+      "uy:md:[&:has([data-unity-page])]:pl-0"
+    ],
+    content: [
+      "uy:flex-1",
+      "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"
+    ],
+    footer: ["uy:hidden", "uy:md:block"]
+  },
+  variants: {
+    withoutContentPadding: {
+      false: {
+        content: ["uy:md:pr-300", "uy:md:pt-250", "&:has()"],
+        contentWrapper: ["uy:md:pl-100"]
+      },
+      true: {
+        content: [],
+        contentWrapper: []
+      }
+    }
+  }
+});
+function R({
+  children: y,
+  menu: l,
+  header: a,
+  footer: r,
+  withoutContentPadding: n = !1
+}) {
+  const u = v(null), { height: o = 0 } = g({
+    ref: u,
+    box: "border-box"
+  }), { body: p, header: s, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
+    withoutContentPadding: n
+  }), m = {
+    "--uy-app-layout-menu-height": `calc(100dvh - ${o}px)`,
+    "--uy-app-layout-header-sticky-offset": `${o}px`
+  };
+  return /* @__PURE__ */ t("div", { className: p(), style: m, children: [
+    a && /* @__PURE__ */ e(
+      "div",
+      {
+        ref: u,
+        className: s(),
+        role: "alert",
+        "aria-live": "assertive",
+        children: a
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: i(), children: [
+      /* @__PURE__ */ e("div", { className: d(), children: l }),
+      /* @__PURE__ */ t("div", { className: c(), children: [
+        /* @__PURE__ */ e("div", { className: f(), children: y }),
+        r && /* @__PURE__ */ e("footer", { className: h(), children: r })
+      ] })
+    ] })
+  ] });
+}
+export {
+  R as AppLayout
+};

package/dist/esm/components/app-menu/AppMenu.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { AppMenuContextProvider as u } from "./parts/AppMenu.context.js";
+const a = ({ children: p }) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
+  "div",
+  {
+    className: "uy:relative uy:z-[1] uy:flex uy:flex-col uy:p-150 uy:gap-y-300 uy:md:max-w-app-menu uy:md:h-full",
+    "data-dd-privacy": "allow",
+    children: p
+  }
+) });
+a.displayName = "AppMenu";
+export {
+  a as AppMenu
+};