@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,35 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useContext as u } from "react";
+import { ComboBoxStateContext as m } from "react-aria-components";
+import { useIntl as a } from "react-intl";
+import { twMerge as i } from "tailwind-merge";
+import { CircularIconButton as s } from "../../icon-button/CircularIconButton.js";
+const c = ({
+  className: e,
+  isReadOnly: o,
+  isDisabled: n
+}) => {
+  const t = u(m), r = a();
+  return !(t != null && t.inputValue) || o || n ? null : /* @__PURE__ */ l(
+    s,
+    {
+      slot: null,
+      title: r.formatMessage({
+        id: "unity:component:common:clear:title",
+        defaultMessage: "Clear"
+      }),
+      className: i(
+        e,
+        "uy-text-content-neutral-enabled group-data-[empty=true]:uy-hidden"
+      ),
+      icon: "CloseOutlined",
+      onPress: () => {
+        t.setSelectedKey(null);
+      }
+    }
+  );
+};
+c.displayName = "ClearButton";
+export {
+  c as AutocompleteClearButton
+};

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

@@ -0,0 +1,56 @@
+import { ListBoxItemProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const autocompleteItem: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}, {
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}>, {
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}, {
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface AutocompleteItemProps extends VariantProps<typeof autocompleteItem>, Omit<ListBoxItemProps, 'className' | 'style' | 'routerOptions' | 'referrerPolicy' | 'ping' | 'target' | 'hrefLang' | 'download' | 'ref' | 'rel' | 'aria-label'> {
+}
+/**
+ * The `AutocompleteItem` component is used within the Autocomplete component to render individual items in the autocomplete results list.
+ * It provides styling and accessibility features for autocomplete result items.
+ * @example
+ * ```tsx
+ * <Autocomplete name="fruits" items={fruits}>
+ *   {item => (
+ *     <AutocompleteItem id={item.id} textValue={item.name} isDisabled={item.disabled}>
+ *       {item.name}
+ *     </AutocompleteItem>
+ *   )}
+ * </Autocomplete>
+ * ```
+ */
+declare const AutocompleteItem: import('react').ForwardRefExoticComponent<AutocompleteItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export { AutocompleteItem };

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 enabled:uy-text-content-neutral-enabled",
+    "enabled:uy-bg-surface-neutral-enabled enabled:uy-text-content-neutral-enabled",
+    "data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-text-content-neutral-pressed",
+    "data-[focus-visible]:uy-outline-offset-2 data-[focus-visible]:uy-outline-2 data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-bg-surface-neutral-focus data-[focus-visible]:uy-text-content-neutral-focus",
+    "data-[disabled]:uy-text-content-neutral-disabled"
+  ],
+  variants: {
+    isDisabled: {
+      false: "hover:uy-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,96 @@
+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 | {
+            separator?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            separator?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    header: string;
+    separator: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            separator?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            separator?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    header: string;
+    separator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    header: string;
+    separator: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            separator?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            header?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, 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 [section:last-child_&]:uy-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,76 @@
+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 | {
+            list?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            list?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            list?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            list?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    list: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            list?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, 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.context.d.ts

@@ -0,0 +1,11 @@
+type AvatarContextValue = {
+    variant: 'circle' | 'square';
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    hasPair: boolean;
+};
+export declare const AvatarContext: import('react').Context<AvatarContextValue>;
+export declare function AvatarProvider({ variant, size, hasPair, children, }: AvatarContextValue & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useAvatarContext(): AvatarContextValue;
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as i, useContext as s } from "react";
+const r = i({
+  variant: "circle",
+  size: "md",
+  hasPair: !1
+});
+function c({
+  variant: t,
+  size: e,
+  hasPair: o,
+  children: a
+}) {
+  return /* @__PURE__ */ n(r.Provider, { value: { variant: t, size: e, hasPair: o }, children: a });
+}
+function x() {
+  const t = s(r);
+  if (!t)
+    throw new Error("useAvatarContext must be used within an AvatarProvider");
+  return t;
+}
+export {
+  r as AvatarContext,
+  c as AvatarProvider,
+  x as useAvatarContext
+};

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

@@ -0,0 +1,206 @@
+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", import('tailwind-variants/dist/config.js').TVConfig<{} | {
+    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;
+        };
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    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, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    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, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, 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
+};