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

package/dist/esm/components/autocomplete/parts/AutocompleteItem.js

@@ -0,0 +1,36 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { ListBoxItem as n } from "react-aria-components";
+import { tv as d } from "tailwind-variants";
+const i = d({
+  base: [
+    "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
+    "uy:enabled:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
+    "uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed",
+    "uy:data-[focus-visible]:outline-offset-2 uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:bg-surface-neutral-focus uy:data-[focus-visible]:text-content-neutral-focus",
+    "uy:data-[disabled]:text-content-neutral-disabled"
+  ],
+  variants: {
+    isDisabled: {
+      false: "uy:hover:bg-surface-neutral-hover",
+      true: "uy:cursor-not-allowed"
+    }
+  }
+}), y = r(
+  ({ children: e, isDisabled: t, textValue: u, ...a }, o) => /* @__PURE__ */ l(
+    n,
+    {
+      ...a,
+      isDisabled: t,
+      textValue: u,
+      ref: o,
+      className: ({ isDisabled: s }) => i({ isDisabled: s }),
+      children: e
+    }
+  )
+);
+y.displayName = "AutocompleteItem";
+export {
+  y as AutocompleteItem,
+  i as autocompleteItem
+};

package/dist/esm/components/autocomplete/parts/AutocompleteItemGroup.d.ts

@@ -0,0 +1,80 @@
+import { ForwardedRef } from 'react';
+import { ListBoxSectionProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const autocompleteItemGroup: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    header: string;
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    header: string;
+    separator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    header: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface AutocompleteItemGroupProps<T> extends VariantProps<typeof autocompleteItemGroup>, ListBoxSectionProps<T> {
+    /**
+     * The label text displayed at the top of the group
+     */
+    label: string;
+}
+type AutocompleteItemGroupComponent = (<TItems extends object>(props: AutocompleteItemGroupProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * Groups related options within an `Autocomplete` component.
+ *
+ * This component provides two APIs for grouping options:
+ * 1. Static API - Directly nest AutocompleteItem components
+ * 2. Dynamic API - Provide an array of items and a render function for dynamic items
+ * @example
+ * ```tsx
+ * // Static API
+ * <AutocompleteItemGroup label="Fruits">
+ *   <AutocompleteItem id="apple">Apple</AutocompleteItem>
+ *   <AutocompleteItem id="banana">Banana</AutocompleteItem>
+ * </AutocompleteItemGroup>
+ *
+ * // Dynamic API
+ * <AutocompleteItemGroup
+ *   label="Fruits"
+ *   items={fruits}
+ * >
+ *   {fruit => (
+ *     <AutocompleteItem id={fruit.id}>
+ *       {fruit.name}
+ *     </AutocompleteItem>
+ *   )}
+ * </AutocompleteItemGroup>
+ * ```
+ */
+declare const AutocompleteItemGroup: AutocompleteItemGroupComponent;
+export { AutocompleteItemGroup };

package/dist/esm/components/autocomplete/parts/AutocompleteItemGroup.js

@@ -0,0 +1,30 @@
+import { jsxs as a, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { ListBoxSection as i, Header as y, Collection as d, Separator as p } from "react-aria-components";
+import { tv as h } from "tailwind-variants";
+const f = h({
+  slots: {
+    base: "",
+    header: "uy:text-content-neutral-enabled uy:typography-body-strong uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150",
+    separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mb-100 uy:mt-100 uy:[section:last-child_&]:hidden"
+  }
+}), b = ({ label: r, children: o, items: t }, l) => {
+  const { base: s, header: m, separator: n } = f();
+  return /* @__PURE__ */ a(i, { ref: l, className: s(), id: r, items: t, children: [
+    /* @__PURE__ */ e(y, { className: m(), children: r }),
+    t ? /* @__PURE__ */ a(u, { children: [
+      /* @__PURE__ */ e(d, { items: t, children: o }),
+      /* @__PURE__ */ e(p, { orientation: "horizontal", className: n() })
+    ] }) : /* @__PURE__ */ a(u, { children: [
+      o,
+      /* @__PURE__ */ e(p, { orientation: "horizontal", className: n() })
+    ] })
+  ] });
+}, x = c(function(o, t) {
+  return b(o, t);
+});
+x.displayName = "AutocompleteItemGroup";
+export {
+  x as AutocompleteItemGroup,
+  f as autocompleteItemGroup
+};

package/dist/esm/components/autocomplete/parts/AutocompletePanel.d.ts

@@ -0,0 +1,62 @@
+import { RefObject } from 'react';
+import { PopoverProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { AutocompleteProps } from '../Autocomplete.js';
+export declare const autocompletePanel: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    list: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface AutocompletePanelProps<T extends object> extends VariantProps<typeof autocompletePanel>, Omit<PopoverProps, 'children'> {
+    /** Width of the panel, used to match the width of the search input */
+    panelWidth: string | null;
+    /** Reference to the search input element */
+    searchRef: RefObject<HTMLDivElement>;
+    /** The content to render inside the panel */
+    children: AutocompleteProps<T>['children'];
+}
+/**
+ * The `AutocompletePanel` component is used within the Autocomplete component to display the dropdown panel containing autocomplete results.
+ * It handles both the loading state and the empty state when no results are found.
+ * @example
+ * ```tsx
+ * <AutocompletePanel
+ *   panelWidth={searchWidth}
+ *   searchRef={searchRef}
+ *   isLoading={isLoading}
+ * >
+ *   {children}
+ * </AutocompletePanel>
+ * ```
+ */
+declare const AutocompletePanel: {
+    <T extends object>(props: AutocompletePanelProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AutocompletePanel };

package/dist/esm/components/autocomplete/parts/AutocompletePanel.js

@@ -0,0 +1,47 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { Popover as y, ListBox as m } from "react-aria-components";
+import { FormattedMessage as c } from "react-intl";
+import { tv as d } from "tailwind-variants";
+import { Icon as p } from "../../icon/Icon.js";
+import { Text as t } from "../../text/Text.js";
+const f = d({
+  slots: {
+    base: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:max-h-[312px] uy:shadow-floating",
+    list: "uy:overflow-y-auto uy:max-h-[296px] uy:p-100"
+  }
+}), g = () => /* @__PURE__ */ i("div", { className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-[312px]", children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      variant: "body",
+      className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
+      children: /* @__PURE__ */ e(p, { size: 24, src: "MagnifyingGlassOutlined" })
+    }
+  ),
+  /* @__PURE__ */ e(t, { variant: "bodyLarge", children: /* @__PURE__ */ e(
+    c,
+    {
+      id: "unity:component:autocomplete:panel:empty:label",
+      defaultMessage: "No results found"
+    }
+  ) })
+] }), h = (r) => {
+  const { children: o, panelWidth: s, searchRef: a, ...u } = r, { base: l, list: n } = f();
+  return /* @__PURE__ */ e(
+    y,
+    {
+      ...u,
+      className: l(),
+      offset: 1,
+      triggerRef: a,
+      isNonModal: !0,
+      style: { "--trigger-width": s },
+      children: /* @__PURE__ */ e(m, { className: n(), renderEmptyState: g, children: o })
+    }
+  );
+};
+h.displayName = "AutocompletePanel";
+export {
+  h as AutocompletePanel,
+  f as autocompletePanel
+};

package/dist/esm/components/avatar/Avatar.d.ts

@@ -0,0 +1,120 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
+    size: {
+        xs: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        sm: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        md: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        lg: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        xl: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+    variant: {
+        circle: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        square: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+}, undefined, "uy:inline-block uy:relative uy:shrink-0", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>>;
+export type AvatarProps = PropsWithChildren<{
+    /** Additional class names to apply to the avatar */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    variant?: VariantProps<typeof avatarRoot>['variant'];
+    /** Size of the avatar. One of: xs, sm, md, lg, xl */
+    size?: VariantProps<typeof avatarRoot>['size'];
+    /** Accessible label for the avatar */
+    'aria-label': string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+}>;
+/**
+ * The Avatar component displays visual or text content for representing people or entities.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<{
+    /** Additional class names to apply to the avatar */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    variant?: VariantProps<typeof avatarRoot>["variant"];
+    /** Size of the avatar. One of: xs, sm, md, lg, xl */
+    size?: VariantProps<typeof avatarRoot>["size"];
+    /** Accessible label for the avatar */
+    'aria-label': string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar };

package/dist/esm/components/avatar/Avatar.js

@@ -0,0 +1,33 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as c from "react";
+import * as o from "@radix-ui/react-avatar";
+import { twMerge as d } from "tailwind-merge";
+import { tv as f } from "tailwind-variants";
+import { AvatarProvider as n } from "./Avatar.context.js";
+import { avatarBase as p } from "./Avatar.variants.js";
+const v = f({
+  extend: p,
+  base: "uy:inline-block uy:relative uy:shrink-0",
+  defaultVariants: {
+    size: "md",
+    variant: "circle"
+  }
+}), y = c.forwardRef(
+  ({ size: a = "md", variant: r = "circle", className: e, ...i }, m) => {
+    const s = v({ variant: r, size: a }), l = d(s, e);
+    return /* @__PURE__ */ t(n, { variant: r, size: a, hasPair: !1, children: /* @__PURE__ */ t(
+      o.Root,
+      {
+        ref: m,
+        role: "img",
+        className: l,
+        "data-dd-privacy": "allow",
+        ...i
+      }
+    ) });
+  }
+);
+y.displayName = o.Root.displayName;
+export {
+  y as Avatar
+};

package/dist/esm/components/avatar/Avatar.variants.d.ts

@@ -0,0 +1,37 @@
+export declare const avatarBase: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/avatar/Avatar.variants.js

@@ -0,0 +1,46 @@
+import { tv as a } from "tailwind-variants";
+const e = a({
+  variants: {
+    size: {
+      xs: "uy:size-200",
+      sm: "uy:size-300",
+      md: "uy:size-400",
+      lg: "uy:size-500",
+      xl: "uy:size-1000"
+    },
+    variant: {
+      circle: "uy:rounded-circle",
+      square: ""
+    }
+  },
+  compoundVariants: [
+    {
+      size: "xs",
+      variant: "square",
+      className: "uy:rounded-50"
+    },
+    {
+      size: "sm",
+      variant: "square",
+      className: "uy:rounded-50"
+    },
+    {
+      size: "md",
+      variant: "square",
+      className: "uy:rounded-75"
+    },
+    {
+      size: "lg",
+      variant: "square",
+      className: "uy:rounded-100"
+    },
+    {
+      size: "xl",
+      variant: "square",
+      className: "uy:rounded-200"
+    }
+  ]
+});
+export {
+  e as avatarBase
+};

package/dist/esm/components/avatar/parts/AvatarFallback.d.ts

@@ -0,0 +1,95 @@
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
+    color: {
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        sunglow: {
+            background: string;
+            foreground: string;
+        };
+        peach: {
+            background: string;
+            foreground: string;
+        };
+    };
+}, {
+    base: string;
+    background: string;
+    foreground: string;
+}, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>>;
+type AvatarFallbackBaseProps = Pick<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'delayMs'>;
+type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {
+    /** The fallback's variant. It can be one of: `initials`, `placeholder` */
+    variant: 'initials';
+    /** The initials to display as fallback content. Only available when variant is set to `initials` */
+    children: string | null | undefined;
+    color?: never;
+};
+type AvatarFallbackPlaceholderProps = AvatarFallbackBaseProps & {
+    /** The variant of the fallback, should be 'placeholder' */
+    variant: 'placeholder';
+    /**
+     * The color variant for the placeholder. Can be one of: `blue`, `peach`, `sunglow`. Only available when variant is set to `placeholder`
+     * @default 'blue'
+     */
+    color?: VariantProps<typeof avatarPlaceholder>['color'];
+    children?: never;
+};
+type AvatarFallbackProps = AvatarFallbackInitialsProps | AvatarFallbackPlaceholderProps;
+/**
+ * The AvatarFallback component displays a fallback content for an `Avatar` component when no image is provided or failed to load.
+ */
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+export { AvatarFallback };

package/dist/esm/components/avatar/parts/AvatarFallback.js

@@ -0,0 +1,87 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as p from "react";
+import * as t from "@radix-ui/react-avatar";
+import { twMerge as f } from "tailwind-merge";
+import { tv as l } from "tailwind-variants";
+import { useAvatarContext as b } from "../Avatar.context.js";
+import { avatarBase as n } from "../Avatar.variants.js";
+import { getInitials as v } from "../utils.js";
+const h = l({
+  extend: n,
+  slots: {
+    base: "uy:absolute uy:overflow-hidden",
+    background: "",
+    foreground: ""
+  },
+  variants: {
+    color: {
+      blue: {
+        background: "uy:bg-blue-l7",
+        foreground: "uy:fill-blue-l5"
+      },
+      sunglow: {
+        background: "uy:bg-sunglow-l3",
+        foreground: "uy:fill-sunglow-l2"
+      },
+      peach: {
+        background: "uy:bg-peach-l3",
+        foreground: "uy:fill-peach-l2"
+      }
+    }
+  }
+}), w = l({
+  extend: n,
+  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-low",
+  variants: {
+    size: {
+      xs: "uy:typography-body-small-strong",
+      sm: "uy:typography-body-small-strong",
+      md: "uy:typography-body-small-strong",
+      lg: "uy:typography-body-strong",
+      xl: "uy:typography-h2"
+    }
+  }
+}), x = p.forwardRef(({ variant: s, color: u, children: i, ...r }, y) => {
+  const c = b(), { size: e, variant: o } = c;
+  if (s === "placeholder") {
+    const { base: d, background: g, foreground: m } = h({
+      color: u,
+      size: e,
+      variant: o
+    });
+    return /* @__PURE__ */ a(
+      "svg",
+      {
+        role: "img",
+        "aria-hidden": !0,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 16 16",
+        className: f(d(), g()),
+        ...r,
+        children: /* @__PURE__ */ a(
+          "path",
+          {
+            className: m(),
+            fillRule: "evenodd",
+            d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
+            clipRule: "evenodd"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ a(
+    t.Fallback,
+    {
+      ref: y,
+      role: "presentation",
+      className: w({ size: e, variant: o }),
+      ...r,
+      children: v(i)
+    }
+  );
+});
+x.displayName = t.Fallback.displayName;
+export {
+  x as AvatarFallback
+};