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

package/dist/esm/components/app-menu/parts/AppMenuFooter.js

@@ -0,0 +1,233 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as g, useRef as I, isValidElement as O, cloneElement as V } from "react";
+import { uyMerge as v } from "@payfit/unity-themes";
+import { FormattedMessage as h, useIntl as z } from "react-intl";
+import { Actionable as x } from "../../actionable/Actionable.js";
+import { Avatar as F } from "../../avatar/Avatar.js";
+import { AvatarFallback as H } from "../../avatar/parts/AvatarFallback.js";
+import { AvatarImage as j } from "../../avatar/parts/AvatarImage.js";
+import { Badge as A } from "../../badge/Badge.js";
+import { Icon as M } from "../../icon/Icon.js";
+import { Menu as E } from "../../menu/Menu.js";
+import { MenuContent as S } from "../../menu/parts/MenuContent.js";
+import { MenuHeader as B } from "../../menu/parts/MenuHeader.js";
+import { useAppMenuContext as C } from "./AppMenu.context.js";
+const N = (t) => /* @__PURE__ */ l(
+  F,
+  {
+    "aria-label": `${t.title} avatar`,
+    size: "md",
+    variant: "square",
+    "aria-labelledby": "profile-button-label",
+    children: [
+      /* @__PURE__ */ e(j, { src: t.avatar, alt: t.title ?? "" }),
+      /* @__PURE__ */ e(H, { variant: "initials", delayMs: 100, children: t.title }),
+      t.avatarPair && O(t.avatarPair) && V(t.avatarPair, {
+        isHidden: !t.isPairAvatarVisible
+      })
+    ]
+  }
+), R = ({
+  avatar: t,
+  avatarPair: r,
+  title: a,
+  uploadAvatarCallback: u,
+  uploadAvatarLabel: c,
+  uploadAvatarDescription: n
+}) => {
+  const [o, s] = g(!0), y = z(), i = () => {
+    r && s((f) => !f);
+  }, d = v(
+    "uy:group uy:cursor-pointer uy:relative uy:leading-[0] uy:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2"
+  );
+  return /* @__PURE__ */ l(
+    x,
+    {
+      "aria-describedby": "profile-picture-change-desc",
+      "aria-label": c || y.formatMessage({
+        id: "unity:component:app-menu:footer:profile-button:avatar:change",
+        defaultMessage: "Change profile picture"
+      }),
+      className: d,
+      onHoverStart: i,
+      onHoverEnd: i,
+      onFocus: i,
+      onBlur: i,
+      onPress: () => {
+        u == null || u();
+      },
+      children: [
+        /* @__PURE__ */ e(
+          N,
+          {
+            avatar: t,
+            avatarPair: r,
+            title: a,
+            isPairAvatarVisible: o
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover:opacity-70 uy:group-hover:pointer-events-auto uy:group-focus-visible:opacity-70 uy:group-focus-visible:pointer-events-auto uy:bg-utility-backdrop uy:rounded-circle uy:absolute uy:top-0 uy:left-0 uy:w-full uy:h-full uy:transition-all uy:duration-200 uy:items-center uy:justify-center", children: [
+          /* @__PURE__ */ e(
+            M,
+            {
+              alt: "Camera",
+              color: "content.inverted",
+              size: 24,
+              src: "CameraOutlined"
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "uy:sr-only", id: "profile-picture-change-desc", children: n || /* @__PURE__ */ e(
+            h,
+            {
+              id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
+              defaultMessage: "Press enter to change profile picture"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, b = ({
+  asMenuHeader: t = !1,
+  avatar: r,
+  avatarPair: a,
+  badgeLabel: u,
+  description: c,
+  menuTriggerDescription: n,
+  title: o,
+  uploadAvatarCallback: s,
+  uploadAvatarLabel: y,
+  uploadAvatarDescription: i
+}) => /* @__PURE__ */ l("div", { className: "uy:min-w-[240px] uy:w-full uy:flex uy:items-center", children: [
+  /* @__PURE__ */ e("div", { className: "uy:mr-150 uy:flex uy:items-center", children: s ? /* @__PURE__ */ e(
+    R,
+    {
+      avatar: r,
+      avatarPair: a,
+      title: o,
+      uploadAvatarLabel: y,
+      uploadAvatarDescription: i,
+      uploadAvatarCallback: s
+    }
+  ) : /* @__PURE__ */ e(
+    N,
+    {
+      avatar: r,
+      avatarPair: a,
+      title: o,
+      isPairAvatarVisible: !0
+    }
+  ) }),
+  /* @__PURE__ */ l("div", { className: "uy:flex uy:flex-col uy:text-left uy:leading-[1.25] uy:min-w-[50%] uy:flex-grow", children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        id: "profile-button-label",
+        className: "uy:typography-body-strong uy:text-content-neutral uy:text-wrap",
+        "data-dd-privacy": "mask",
+        children: o
+      }
+    ),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "uy:typography-body-small uy:text-content-neutral-low",
+        "data-dd-privacy": "allow",
+        children: c
+      }
+    ),
+    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy:sr-only", children: n || /* @__PURE__ */ e(
+      h,
+      {
+        id: "unity:component:app-menu:footer:profile-button:description",
+        defaultMessage: "Press this button to open the profile menu."
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "uy:p-100", children: t ? /* @__PURE__ */ e(A, { className: "uy:capitalize", variant: "neutral", children: u }) : /* @__PURE__ */ e(
+    M,
+    {
+      src: "CaretUpDownOutlined",
+      alt: "open",
+      size: 20,
+      color: "content.neutral.low"
+    }
+  ) })
+] }), D = ({
+  avatar: t,
+  avatarPair: r,
+  badgeLabel: a,
+  children: u,
+  computeSlot: c,
+  description: n,
+  title: o,
+  menuTriggerDescription: s,
+  uploadAvatarCallback: y,
+  uploadAvatarLabel: i,
+  uploadAvatarDescription: d
+}) => {
+  const { isMobileMenuOpen: f } = C(), [w, m] = g(!1), p = I(null), P = v(
+    "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:z-10 uy:bg-canvas",
+    "uy:p-150",
+    "uy:md:static uy:md:mt-auto uy:md:p-0 uy:md:bg-[transparent]",
+    "uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:block uy:data-[mobile-open=true]:block"
+  );
+  return /* @__PURE__ */ l(
+    "aside",
+    {
+      className: P,
+      "data-mobile-open": f,
+      id: "app-menu-profile-button",
+      children: [
+        c,
+        /* @__PURE__ */ e(
+          x,
+          {
+            ref: p,
+            className: "uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:not-aria-disabled:hover:bg-surface-neutral-hover uy:not-aria-disabled:active:bg-surface-neutral-active uy:not-aria-disabled:data-[pressed]:bg-surface-neutral-active uy:not-aria-disabled:focus-visible:outline-none uy:not-aria-disabled:focus-visible:ring-2 uy:not-aria-disabled:focus-visible:ring-utility-focus-ring uy:not-aria-disabled:focus-visible:ring-offset-2",
+            "aria-labelledby": "profile-button-label",
+            "aria-describedby": "profile-button-description",
+            onPress: () => {
+              m(!0);
+            },
+            children: /* @__PURE__ */ e(
+              b,
+              {
+                avatar: t,
+                avatarPair: r,
+                badgeLabel: a,
+                description: n,
+                menuTriggerDescription: s,
+                title: o,
+                uploadAvatarCallback: y,
+                uploadAvatarLabel: i,
+                uploadAvatarDescription: d
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(E, { isOpen: w, onOpenChange: m, children: /* @__PURE__ */ l(S, { width: 312, placement: "top left", triggerRef: p, children: [
+          /* @__PURE__ */ e(B, { className: "uy:rounded-75", children: /* @__PURE__ */ e(
+            b,
+            {
+              asMenuHeader: !0,
+              avatar: t,
+              avatarPair: r,
+              badgeLabel: a,
+              description: n,
+              menuTriggerDescription: s,
+              title: o,
+              uploadAvatarCallback: y,
+              uploadAvatarLabel: i,
+              uploadAvatarDescription: d
+            }
+          ) }),
+          u
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  D as AppMenuFooter
+};

package/dist/esm/components/app-menu/parts/AppMenuHeader.js

@@ -0,0 +1,41 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useIntl as p } from "react-intl";
+import { Link as m } from "react-router-dom";
+import { IconButton as s } from "../../icon-button/IconButton.js";
+import { PayFitBrand as c } from "../../payfit-brand/PayFitBrand.js";
+import { PayFitBrandPreprod as y } from "../../payfit-brand/PayFitPreprod.js";
+import { useAppMenuContext as f } from "./AppMenu.context.js";
+const N = ({
+  environment: o,
+  linkHref: a,
+  linkLabel: t,
+  notificationsComponent: r,
+  searchComponent: l
+}) => {
+  const { isMobileMenuOpen: n, toggleMobileMenu: u } = f(), d = p();
+  return /* @__PURE__ */ i("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
+    /* @__PURE__ */ e("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ e(
+      s,
+      {
+        variant: "ghost",
+        color: "neutral",
+        icon: n ? "CloseOutlined" : "ListOutlined",
+        label: d.formatMessage({
+          id: n ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
+          defaultMessage: n ? "Close navigation" : "Open navigation"
+        }),
+        onClick: u,
+        "aria-expanded": n,
+        "aria-controls": "app-menu-nav-container app-menu-profile-button"
+      }
+    ) }),
+    /* @__PURE__ */ i("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
+      /* @__PURE__ */ e(m, { to: a, children: o === "production" ? /* @__PURE__ */ e(c, { label: t, width: 104 }) : /* @__PURE__ */ e(y, { label: t, env: o }) }),
+      r
+    ] }),
+    /* @__PURE__ */ e("div", { className: "uy:hidden uy:md:flex", children: l })
+  ] });
+};
+export {
+  N as AppMenuHeader
+};

package/dist/esm/components/app-menu/parts/AppMenuNavContent.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import { twMerge as y } from "tailwind-merge";
+import { useAppMenuContext as a } from "./AppMenu.context.js";
+const r = ({ children: e }) => {
+  const { isMobileMenuOpen: u } = a(), o = y(
+    "uy:flex-col uy:overflow-y-auto uy:overflow-x-hidden uy:gap-y-100 uy:pl-200 uy:pr-200 uy:pb-200 uy:scroll-py-100 uy:md:flex",
+    "uy:bg-canvas uy:md:bg-[transparent]",
+    "uy:absolute uy:top-800 uy:left-0 uy:right-0 uy:z-10 uy:h-svh uy:md:static uy:md:w-auto uy:md:pl-50 uy:md:pr-50 uy:md:pb-50",
+    "uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:flex uy:data-[mobile-open=true]:flex"
+  );
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: o,
+      "data-mobile-open": u,
+      id: "app-menu-nav-container",
+      children: e
+    }
+  );
+};
+export {
+  r as AppMenuNavContent
+};

package/dist/esm/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,96 @@
+import { LoadingState } from '@react-types/shared';
+import { ForwardedRef, ReactNode } from 'react';
+import { ComboBoxProps, ListBoxProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+declare const autocomplete: import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    clearButton: never[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+}, undefined, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    clearButton: never[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    clearButton: never[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface AutocompleteProps<T extends object> extends Omit<ComboBoxProps<T>, 'className' | 'style' | 'children' | 'onSelectionChange'>, VariantProps<typeof autocomplete> {
+    /** Custom placeholder text for the search input */
+    placeholder?: string;
+    /** In dynamic mode, contains the items to display in the search results */
+    items?: ListBoxProps<T>['items'];
+    /** In static mode, contains <AutocompleteItem /> components, in dynamic mode, contains a function to render items passed to the component */
+    children: ListBoxProps<T>['children'];
+    /** Whether the search is currently loading results */
+    loadingState?: LoadingState;
+    /** The name of the search field, used for form submission */
+    name: string;
+    /** Feedback text to display below the autocomplete field. */
+    feedbackText?: ReactNode;
+}
+type AutocompleteComponent = (<TItems extends object>(props: AutocompleteProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `Autocomplete` component is used to create a searchable input field with a dropdown list of results.
+ * It allows users to search through a collection of items and select one.
+ */
+declare const Autocomplete: AutocompleteComponent;
+export { Autocomplete };

package/dist/esm/components/autocomplete/Autocomplete.js

@@ -0,0 +1,172 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { forwardRef as R, useRef as A, useState as B, useCallback as O } from "react";
+import { useId as W } from "react-aria";
+import { ComboBox as k, Input as C } from "react-aria-components";
+import { useIntl as z } from "react-intl";
+import { tv as j } from "tailwind-variants";
+import { useResizeObserver as D } from "usehooks-ts";
+import { Icon as f } from "../icon/Icon.js";
+import { Spinner as P } from "../spinner/Spinner.js";
+import { Text as T } from "../text/Text.js";
+import { AutocompleteClearButton as E } from "./parts/AutocompleteClearButton.js";
+import { AutocompletePanel as G } from "./parts/AutocompletePanel.js";
+const L = j({
+  slots: {
+    base: [
+      "uy:group uy:w-full uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-enabled",
+      "uy:enabled:border-border-form-enabled uy:enabled:bg-surface-danger-enabled uy:enabled:border-border-form-enabled",
+      "uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:focus-visible:border-border-form-focus uy:focus-visible:bg-surface-form-focus",
+      "uy:active:border-border-form-active",
+      "uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled",
+      "uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-error"
+    ],
+    input: [
+      "uy:h-300 uy:typography-body uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
+      "uy:enabled:text-content-form-enabled",
+      "uy:hover:text-content-form-hover",
+      "uy:focus-visible:text-content-form-focus",
+      "uy:active:text-content-form-active",
+      "uy:group-data-[invalid=true]:bg-surface-form-error"
+    ],
+    clearButton: [],
+    icon: [
+      "uy:self-center",
+      "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"
+    ],
+    invalidIcon: [
+      "uy:self-center uy:hidden",
+      "uy:group-data-[invalid=true]:block"
+    ],
+    wrapperState: ["uy:flex uy:items-center uy:gap-50"]
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        base: "uy:bg-surface-form-disabled",
+        icon: "uy:text-content-neutral-lowest-disabled",
+        button: "uy:bg-surface-form-error uy:text-content-neutral-disabled",
+        clearButton: "uy:hidden",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only uy:cursor-text"
+      },
+      false: {
+        base: [
+          "uy:bg-surface-form-enabled",
+          "uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover uy:data-[disabled=true]:cursor-not-allowed"
+        ],
+        icon: "uy:text-content-neutral-lowest",
+        input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest uy:group-data-[disabled=true]:cursor-not-allowed"
+      }
+    }
+  }
+}), U = ({
+  intl: a,
+  placeholder: r,
+  isDisabled: t
+}) => t ? "" : r || a.formatMessage({
+  id: "unity:component:autocomplete:placeholder",
+  defaultMessage: "Search"
+}), $ = (a, r) => {
+  const {
+    placeholder: t,
+    isDisabled: l,
+    isInvalid: d,
+    isReadOnly: u,
+    items: m,
+    children: y,
+    loadingState: i,
+    name: b,
+    feedbackText: p,
+    ...g
+  } = a, n = z(), o = A(null), [h, v] = B(null), c = W(), x = O(() => {
+    o.current && v(`${o.current.offsetWidth}px`);
+  }, [o]);
+  D({ ref: o, onResize: x });
+  const { base: w, input: I, icon: M, invalidIcon: N, wrapperState: S, clearButton: F } = L({
+    isReadOnly: u
+  });
+  return /* @__PURE__ */ s("search", { ref: r, children: [
+    /* @__PURE__ */ s(
+      k,
+      {
+        className: w(),
+        name: b,
+        isInvalid: d,
+        isDisabled: l || u,
+        isReadOnly: u,
+        ref: o,
+        "aria-label": n.formatMessage({
+          id: "unity:component:autocomplete:placeholder",
+          defaultMessage: "Search"
+        }),
+        items: m,
+        ...g,
+        children: [
+          /* @__PURE__ */ e(
+            f,
+            {
+              src: "MagnifyingGlassOutlined",
+              className: M(),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ e(
+            C,
+            {
+              className: I(),
+              "aria-describedby": c,
+              placeholder: U({ intl: n, placeholder: t, isDisabled: l })
+            }
+          ),
+          /* @__PURE__ */ s("div", { className: S(), children: [
+            /* @__PURE__ */ e(
+              f,
+              {
+                className: N(),
+                src: "WarningCircleOutlined",
+                color: "content.form.invalid",
+                alt: n.formatMessage({
+                  id: "unity:component:form-field:form-input:error:alt",
+                  defaultMessage: "Error"
+                })
+              }
+            ),
+            i && i !== "error" && i !== "idle" && /* @__PURE__ */ e("span", { className: "uy:px-50", children: /* @__PURE__ */ e(
+              P,
+              {
+                label: n.formatMessage({
+                  id: "unity:component:common:loading:label",
+                  defaultMessage: "Loading..."
+                }),
+                color: "primary",
+                size: "small",
+                "aria-hidden": "true"
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              E,
+              {
+                isReadOnly: u,
+                isDisabled: l
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(G, { panelWidth: h, searchRef: o, children: y })
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ e(
+      T,
+      {
+        id: c,
+        className: "uy:typography-body-small-strong uy:text-content-form-invalid",
+        children: p
+      }
+    )
+  ] });
+}, q = R(function(r, t) {
+  return $(r, t);
+});
+q.displayName = "Autocomplete";
+export {
+  q as Autocomplete
+};

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

@@ -0,0 +1,18 @@
+interface AutocompleteClearButtonProps {
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+}
+/**
+ * The `ClearButton` component is used within the `Autocomplete` component to provide a way to clear the current autocomplete input.
+ * It appears only when there is text in the autocomplete field and disappears when the field is empty.
+ * @example
+ * ```tsx
+ * <ClearButton intl={intl} />
+ * ```
+ */
+declare const AutocompleteClearButton: {
+    ({ className, isReadOnly, isDisabled, }: AutocompleteClearButtonProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { AutocompleteClearButton };

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 uy:group-data-[empty=true]: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,36 @@
+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[], {
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+}, undefined, 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 };