@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,31 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Button as i } from "react-aria-components";
+import { twMerge as n } from "tailwind-merge";
+import { tv as d } from "tailwind-variants";
+const m = d({
+  base: "group",
+  variants: {
+    isUnstyled: {
+      true: "",
+      false: "disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled"
+    }
+  },
+  defaultVariants: {
+    isUnstyled: !1
+  }
+}), f = l(
+  ({ children: t, className: e, isUnstyled: a = !1, ...o }, r) => /* @__PURE__ */ s(
+    i,
+    {
+      ref: r,
+      className: n(m({ isUnstyled: a }), e),
+      ...o,
+      children: t
+    }
+  )
+);
+f.displayName = "Actionable";
+export {
+  f as Actionable
+};

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

@@ -0,0 +1,155 @@
+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, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, {
+    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, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, 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,55 @@
+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", import('tailwind-variants/dist/config.js').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config.js').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, 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.d.ts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.js';
+type ContentElements = 'div' | 'p' | 'span';
+export type AlertContentProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'p'
+     */
+    asElement?: ContentElements;
+};
+declare const AlertContent: import('react').ForwardRefExoticComponent<Omit<TextProps, "className" | "color" | "variant"> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'p'
+     */
+    asElement?: ContentElements;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertContent };

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.d.ts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.js';
+type TitleElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type AlertTitleProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'h3'
+     */
+    asElement?: TitleElements;
+};
+declare const AlertTitle: import('react').ForwardRefExoticComponent<Omit<TextProps, "className" | "color" | "variant"> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'h3'
+     */
+    asElement?: TitleElements;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertTitle };

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.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+export type AnchorPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+interface AnchorProps {
+    children: [ReactElement, ReactElement];
+    position?: AnchorPosition;
+    offset?: number | [number, number];
+}
+/**
+ * The Anchor component is a primitive used to anchor a small component to a larger one in any of the large component's corners.
+ */
+declare const Anchor: {
+    ({ children, position, offset, }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Anchor };

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.d.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type AppLayoutProps = PropsWithChildren<{
+    /**
+     * The header component to be displayed at the top of the layout
+     * @default undefined
+     */
+    header?: ReactNode;
+    /**
+     * The menu component to be displayed on the side of the layout
+     */
+    menu: ReactNode;
+    /**
+     * The footer component to be displayed at the bottom of the layout
+     * @default undefined
+     */
+    footer?: ReactNode;
+    /**
+     * Removes the padding top and right for the content
+     * @default: false
+     */
+    withoutContentPadding?: boolean;
+}>;
+/**
+ * The `AppLayout` component creates a responsive base structure with a fixed menu sidebar.
+ * Use this when you need a complex layout with a persistent navigation menu.
+ */
+export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, withoutContentPadding, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

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]",
+      "md:uy-flex-row"
+    ],
+    menu: ["uy-w-full", "md:uy-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
+      "md:[&:has([data-unity-page])]:uy-pl-0"
+    ],
+    content: [
+      "uy-flex-1",
+      "md:[&:has([data-unity-page])]:uy-pr-0 md:[&:has([data-unity-page])]:uy-pt-0"
+    ],
+    footer: ["uy-hidden", "md:uy-block"]
+  },
+  variants: {
+    withoutContentPadding: {
+      false: {
+        content: ["md:uy-pr-300", "md:uy-pt-250", "&:has()"],
+        contentWrapper: ["md:uy-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.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface AppMenuProps {
+    children: ReactNode;
+}
+declare const AppMenu: {
+    ({ children }: AppMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AppMenu };

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 md:uy-max-w-app-menu md:uy-h-full",
+    "data-dd-privacy": "allow",
+    children: p
+  }
+) });
+a.displayName = "AppMenu";
+export {
+  a as AppMenu
+};

package/dist/esm/components/app-menu/parts/AppMenu.context.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+type AppMenuContextValue = {
+    isMobileMenuOpen: boolean;
+    toggleMobileMenu: () => void;
+};
+export declare const AppMenuContext: import('react').Context<AppMenuContextValue>;
+export declare function AppMenuContextProvider({ children, }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+export declare function useAppMenuContext(): AppMenuContextValue;
+export {};

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

@@ -0,0 +1,25 @@
+import { jsx as M } from "react/jsx-runtime";
+import { createContext as i, useState as l, useContext as r } from "react";
+const e = i({
+  isMobileMenuOpen: !1,
+  toggleMobileMenu: () => null
+});
+function a({
+  children: n
+}) {
+  const [t, o] = l(!1), u = {
+    toggleMobileMenu: () => {
+      o((s) => !s);
+    },
+    isMobileMenuOpen: t
+  };
+  return /* @__PURE__ */ M(e.Provider, { value: u, children: n });
+}
+function f() {
+  return r(e);
+}
+export {
+  e as AppMenuContext,
+  a as AppMenuContextProvider,
+  f as useAppMenuContext
+};

package/dist/esm/components/app-menu/parts/AppMenuFooter.d.ts

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from 'react';
+import { AvatarPairProps } from '../../avatar/parts/AvatarPair.js';
+type CommonProps = {
+    avatar?: string;
+    avatarPair?: ReactElement<AvatarPairProps>;
+    title?: string;
+    description?: ReactNode;
+    badgeLabel?: string;
+    /**
+     * Use this to provide a custom context to the screen reader. Press this button to open the profile menu.
+     */
+    menuTriggerDescription?: string;
+    uploadAvatarCallback?: () => void;
+    /**
+     * Use this to provide a custom context to the screen reader. Default is "Press enter to change profile picture"
+     */
+    uploadAvatarDescription?: string;
+    /**
+     * Use this to provide a custom context to the screen reader. Default is Change profile picture
+     */
+    uploadAvatarLabel?: string;
+};
+export type AppMenuFooterProps = CommonProps & {
+    children?: ReactNode;
+    computeSlot?: ReactNode;
+};
+export type AppMenuFooterHeaderProps = CommonProps & {
+    asMenuHeader?: boolean;
+};
+export declare const AppMenuFooter: ({ avatar, avatarPair, badgeLabel, children, computeSlot, description, title, menuTriggerDescription, uploadAvatarCallback, uploadAvatarLabel, uploadAvatarDescription, }: AppMenuFooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};