@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/link/Link.d.ts

@@ -0,0 +1,83 @@
+import { HTMLAttributes } from 'react';
+import { LinkProps as AriaLinkProps } from 'react-aria-components';
+import { NavLinkProps as NavRouterLinkProps } from 'react-router-dom';
+import { VariantProps } from 'tailwind-variants';
+import { link } from './Link.variants.js';
+export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement['href'] | NavRouterLinkProps['to'];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>['id'];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: VariantProps<typeof link>['variant'];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: VariantProps<typeof link>['color'];
+    /**
+     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the link marks the current section or page.
+     * @default false
+     */
+    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, 'aria-current'> | undefined;
+    /**
+     * When true, the active state will only be applied if the location is matched exactly.
+     * @default false
+     */
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+};
+/**
+ * Links allow users to navigate to different pages or sections.
+ */
+declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement["href"] | NavRouterLinkProps["to"];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>["id"];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: VariantProps<typeof link>["variant"];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: VariantProps<typeof link>["color"];
+    /**
+     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the link marks the current section or page.
+     * @default false
+     */
+    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
+    /**
+     * When true, the active state will only be applied if the location is matched exactly.
+     * @default false
+     */
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { Link };

package/dist/esm/components/link/Link.js

@@ -0,0 +1,66 @@
+import { jsxs as k, jsx as y } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { IconSprite as g } from "@payfit/unity-icons";
+import { Link as w } from "react-aria-components";
+import { useRouter as x } from "../../providers/router/RouterProvider.js";
+import { link as L } from "./Link.variants.js";
+import { isExternalUrl as A } from "./utils.js";
+const E = v(
+  ({
+    href: o,
+    children: a,
+    variant: s = "inline",
+    color: c = "primary",
+    isDisabled: n = !1,
+    isExact: m = !1,
+    isCurrent: p = void 0,
+    isExternal: d,
+    maxCharactersTruncation: t,
+    ...r
+  }, u) => {
+    const l = x(), e = d ?? A(o), i = !e && l ? l.isActive(o.toString(), m) : p, f = L({
+      variant: s,
+      color: c,
+      isDisabled: n,
+      isTruncated: !!t
+    });
+    return /* @__PURE__ */ k(
+      w,
+      {
+        "data-dd-privacy": "allow",
+        ...r,
+        href: o,
+        ref: u,
+        style: !!t ? {
+          "--uy-link-max-w": `${t}ch`
+        } : {},
+        className: f,
+        isDisabled: n,
+        target: e ? "_blank" : r.target,
+        rel: e && !r.rel ? "noopener noreferrer" : r.rel,
+        ...i !== void 0 && {
+          "data-current": i,
+          "aria-current": i ? "page" : void 0
+        },
+        children: [
+          a,
+          e && /* @__PURE__ */ y(
+            g,
+            {
+              src: "ArrowSquareOutOutlined",
+              color: "currentColor",
+              width: "1em",
+              height: "1em",
+              role: "presentation",
+              className: "uy-self-center uy-inline"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+E.displayName = "Link";
+export {
+  E as Link
+};

package/dist/esm/components/link/Link.variants.d.ts

@@ -0,0 +1,120 @@
+export declare const link: import('tailwind-variants').TVReturnType<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}>, {
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/esm/components/link/Link.variants.js

@@ -0,0 +1,42 @@
+import { tv as t } from "tailwind-variants";
+const a = t({
+  base: "uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring",
+  variants: {
+    variant: {
+      inline: "uy-inline uy-text-inherit uy-font-medium uy-leading-inherit",
+      standalone: "uy-flex uy-typography-action uy-gap-x-25 uy-items-end"
+    },
+    color: {
+      primary: "uy-text-content-primary-enabled hover:uy-text-content-primary-hover active:uy-text-content-primary-active data-[pressed]:uy-text-content-primary-active data-[current]:uy-text-content-primary-active aria-[current]:uy-text-content-primary-active",
+      secondary: "uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover active:uy-text-content-neutral-active data-[pressed]:uy-text-content-neutral-active data-[current]:uy-text-content-neutral-active aria-[current]:uy-text-content-neutral-active"
+    },
+    isDisabled: {
+      true: "data-[disabled]:uy-cursor-not-allowed",
+      false: "enabled:uy-cursor-pointer"
+    },
+    isTruncated: {
+      true: "uy-truncate uy-max-w-[var(--uy-link-max-w)]",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      isDisabled: !0,
+      class: "data-[disabled]:uy-text-content-primary-disabled"
+    },
+    {
+      color: "secondary",
+      isDisabled: !0,
+      class: "data-[disabled]:uy-text-content-neutral-lowest-disabled"
+    }
+  ],
+  defaultVariants: {
+    variant: "inline",
+    color: "primary",
+    isDisabled: !1
+  }
+});
+export {
+  a as link
+};

package/dist/esm/components/link/utils.d.ts

@@ -0,0 +1 @@
+export declare function isExternalUrl(href?: string): boolean;

package/dist/esm/components/link/utils.js

@@ -0,0 +1,16 @@
+function a(i) {
+  if (!i) return !1;
+  const n = (t) => t.startsWith("/") || // absolute path
+  t.startsWith("./") || // relative path
+  t.startsWith("../") || // relative path
+  t.startsWith("#"), s = (t) => t.includes("://");
+  try {
+    const t = new URL(i, window.location.origin);
+    return t.origin !== window.location.origin || s(t.pathname) ? !0 : !n(t.pathname);
+  } catch {
+    return !n(i);
+  }
+}
+export {
+  a as isExternalUrl
+};

package/dist/esm/components/menu/Menu.d.ts

@@ -0,0 +1,10 @@
+import { MenuTriggerProps } from 'react-aria-components';
+interface MenuProps {
+    defaultOpen?: MenuTriggerProps['defaultOpen'];
+    children?: MenuTriggerProps['children'];
+}
+export declare function Menu({ defaultOpen, children }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/Menu.js

@@ -0,0 +1,9 @@
+import { jsx as n } from "react/jsx-runtime";
+import { MenuTrigger as o } from "react-aria-components";
+function i({ defaultOpen: r, children: e }) {
+  return /* @__PURE__ */ n(o, { defaultOpen: r, children: e });
+}
+i.displayName = "Menu";
+export {
+  i as Menu
+};

package/dist/esm/components/menu/parts/MenuContent.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { PopoverProps } from 'react-aria-components';
+interface MenuContent {
+    placement?: PopoverProps['placement'];
+    width?: number;
+}
+export declare function MenuContent({ children, placement, width, }: PropsWithChildren<MenuContent>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuContent {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/parts/MenuContent.js

@@ -0,0 +1,22 @@
+import { jsx as u } from "react/jsx-runtime";
+import { Popover as n, Menu as a } from "react-aria-components";
+function y({
+  children: r,
+  placement: o,
+  width: e
+}) {
+  const t = e ? `uy-w-[${e}px]` : "";
+  return /* @__PURE__ */ u(
+    n,
+    {
+      placement: o,
+      className: "uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",
+      "data-dd-privacy": "allow",
+      children: /* @__PURE__ */ u(a, { autoFocus: "first", className: `uy-min-w-[320px] ${t}`, children: r })
+    }
+  );
+}
+y.displayName = "MenuContent";
+export {
+  y as MenuContent
+};

package/dist/esm/components/menu/parts/MenuHeader.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface MenuHeaderProps {
+    className?: string;
+}
+export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuHeader {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/parts/MenuHeader.js

@@ -0,0 +1,16 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { MenuSection as n, Header as m } from "react-aria-components";
+import { MenuSeparator as t } from "./MenuSeparator.js";
+function i({
+  children: r,
+  className: o
+}) {
+  return /* @__PURE__ */ a(n, { children: [
+    /* @__PURE__ */ e(m, { className: `uy-p-100 ${o}`, children: r }),
+    /* @__PURE__ */ e(t, {})
+  ] });
+}
+i.displayName = "MenuHeader";
+export {
+  i as MenuHeader
+};

package/dist/esm/components/menu/parts/MenuItem.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { MenuItemProps as MenuItemAriaComponentProps } from 'react-aria-components';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+interface MenuItemProps extends DataAttributes {
+    children?: MenuItemAriaComponentProps['children'];
+    href?: MenuItemAriaComponentProps['href'];
+    onAction?: MenuItemAriaComponentProps['onAction'];
+    prefix?: ReactNode;
+    className?: string;
+}
+export declare function MenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuItem {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/parts/MenuItem.js

@@ -0,0 +1,32 @@
+import { jsxs as o } from "react/jsx-runtime";
+import { MenuItem as s } from "react-aria-components";
+import { twMerge as y } from "tailwind-merge";
+function i({
+  prefix: e,
+  children: u,
+  href: t,
+  onAction: r,
+  className: a,
+  ...n
+}) {
+  return /* @__PURE__ */ o(
+    s,
+    {
+      href: t,
+      onAction: r,
+      className: y(
+        "uy-cursor-pointer uy-flex uy-p-100 uy-items-start uy-gap-100 uy-rounded-25 uy-typography-body uy-text-content-neutral hover:uy-bg-surface-neutral-hover data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-utility-focus-ring active:uy-bg-surface-neutral-active",
+        a
+      ),
+      ...n,
+      children: [
+        e || null,
+        u
+      ]
+    }
+  );
+}
+i.displayName = "MenuItem";
+export {
+  i as MenuItem
+};

package/dist/esm/components/menu/parts/MenuSeparator.d.ts

@@ -0,0 +1,4 @@
+export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSeparator {
+    var displayName: string;
+}

package/dist/esm/components/menu/parts/MenuSeparator.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Separator as a } from "react-aria-components";
+function e() {
+  return /* @__PURE__ */ r(a, { className: "uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mt-100 uy-mb-100" });
+}
+e.displayName = "MenuSeparator";
+export {
+  e as MenuSeparator
+};

package/dist/esm/components/menu/parts/MenuTrigger.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+interface MenuTriggerProps {
+    className?: string;
+    asChild?: boolean;
+}
+export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuTrigger {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/parts/MenuTrigger.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Slot as m } from "@radix-ui/react-slot";
+import { Button as n } from "react-aria-components";
+function i({
+  children: r,
+  asChild: t,
+  className: e
+}) {
+  return /* @__PURE__ */ o(t ? m : n, { className: e, children: r });
+}
+i.displayName = "MenuTrigger";
+export {
+  i as MenuTrigger
+};

package/dist/esm/components/multi-select/MultiSelect.d.ts

@@ -0,0 +1,62 @@
+import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.js';
+declare const MultiSelectComponent: <TItem extends Record<string | number, unknown>, TItemKey extends keyof TItem, TKeyType extends TItem[TItemKey] & (string | number)>(props: MultiSelectProps<TItem, TItemKey, TKeyType>, ref: React.ForwardedRef<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The MultiSelect component allows users to select multiple items from a dropdown list.
+ * The component provides two different APIs:
+ * 1. Static API - For simple cases where options are defined as direct children and use primitive values as keys (strings or numbers)
+ * 2. Dynamic API - For data-driven cases where options are generated from a dynamic collection with typed objects
+ * @example
+ * ```tsx
+ * import { MultiSelect, MultiSelectOption, MultiSelectOptGroup } from '@payfit/unity-components'
+ *
+ * // Static API - Options defined as direct children
+ * <MultiSelect
+ *   placeholder="Select fruits..."
+ *   onChange={(selected) => console.log(selected)}
+ * >
+ *   <MultiSelectOptGroup label="Citrus" withSeparator>
+ *     <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *     <MultiSelectOption value="lemon">Lemon</MultiSelectOption>
+ *   </MultiSelectOptGroup>
+ *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ * </MultiSelect>
+ *
+ * // Dynamic API - Options generated from a collection with typed objects
+ * interface Fruit {
+ *   id: string;
+ *   name: string;
+ *   category: string;
+ * }
+ *
+ * const fruits: Set<Fruit> = new Set([
+ *   { id: 'apple-1', name: 'Apple', category: 'Core' },
+ *   { id: 'orange-1', name: 'Orange', category: 'Citrus' }
+ * ]);
+ *
+ * <MultiSelect
+ *   items={fruits}
+ *   placeholder="Select fruits..."
+ *   value={new Set(['apple-1'])}
+ *   getItemValue={item => item.id}
+ *   renderValue={(items) =>
+ *     Array.from(items)
+ *       .map(item => item.name)
+ *       .join(', ')
+ *   }
+ * >
+ *   {(item) => (
+ *     <MultiSelectOption value={item.id}>
+ *       {item.name}
+ *     </MultiSelectOption>
+ *   )}
+ * </MultiSelect>
+ * ```
+ * @component
+ * @template TItem - The type of items in the collection. When using the dynamic API, it must be a Record or an object. For the static API, it defaults to a string or number.
+ * @template TItemKey - The key name within TItem used as the selection value (must be a key of TItem). Applies only to the dynamic API.
+ * @template TKeyType - The type of the property at TItem[TItemKey] (must be string or number). Applies only to the dynamic API.
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/inputs-multiselect--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
+ */
+export declare const MultiSelect: MultiSelectComponent;
+export {};