@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/link/{Link.variants.d.ts → RawLink.d.ts}

@@ -1,3 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { HTMLAttributes } from 'react';
+import { LinkProps as AriaLinkProps } from 'react-aria-components';
 export declare const link: import('tailwind-variants').TVReturnType<{
     variant: {
         inline: {
@@ -164,3 +167,92 @@ export declare const link: import('tailwind-variants').TVReturnType<{
     base: string[];
     icon: string[];
 }, undefined, unknown, unknown, undefined>>;
+type LinkVariantProps = VariantProps<typeof link>;
+export type RawLinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement['href'];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLAnchorElement>['id'];
+    /**
+     * The link's size.
+     * @default 'inherit'
+     */
+    size?: LinkVariantProps['size'];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: LinkVariantProps['variant'];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: LinkVariantProps['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 RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement["href"];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLAnchorElement>["id"];
+    /**
+     * The link's size.
+     * @default 'inherit'
+     */
+    size?: LinkVariantProps["size"];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: LinkVariantProps["variant"];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: LinkVariantProps["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 { RawLink };

package/dist/esm/components/link/{Link.variants.js → RawLink.js}

@@ -1,5 +1,11 @@
-import { uyTv as e } from "@payfit/unity-themes";
-const a = e({
+import { jsxs as h, jsx as g } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { IconSprite as k } from "@payfit/unity-icons";
+import { uyTv as D } from "@payfit/unity-themes";
+import { Link as z } from "react-aria-components";
+import { useRouter as A } from "../../providers/router/RouterProvider.js";
+import { isExternalUrl as E } from "./utils.js";
+const L = D({
   slots: {
     base: [
       "uy:rounded-50 uy:underline uy:transition-colors uy:underline-offset-3",
@@ -15,7 +21,7 @@ const a = e({
         icon: "uy:align-top"
       },
       standalone: {
-        base: "uy:flex uy:gap-x-25 uy:items-end",
+        base: "uy:typography-action uy:flex uy:gap-x-25 uy:items-end uy:py-50 uy:sm:p-0",
         icon: "uy:self-center"
       }
     },
@@ -62,6 +68,13 @@ const a = e({
       class: {
         base: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
       }
+    },
+    {
+      size: "inherit",
+      variant: "inline",
+      class: {
+        base: "uy:text-(length:inherit)"
+      }
     }
   ],
   defaultVariants: {
@@ -70,7 +83,67 @@ const a = e({
     isDisabled: !1,
     size: "inherit"
   }
-});
+}), N = w(
+  ({
+    href: a,
+    children: s,
+    variant: u = "inline",
+    color: l = "primary",
+    isDisabled: o = !1,
+    isExact: c = !1,
+    isCurrent: y = void 0,
+    isExternal: d,
+    maxCharactersTruncation: i,
+    size: p = "inherit",
+    ...e
+  }, b) => {
+    const r = A(), t = d ?? E(a), n = !t && r ? r.isActive(a.toString(), c) : y, { base: m, icon: v } = L({
+      variant: u,
+      color: l,
+      isDisabled: o,
+      size: p,
+      isTruncated: !!i
+    }), x = !!i, f = r && {
+      ...n !== void 0 && {
+        "data-current": n,
+        "aria-current": n ? "page" : void 0
+      }
+    };
+    return /* @__PURE__ */ h(
+      z,
+      {
+        "data-dd-privacy": "allow",
+        ...e,
+        href: a,
+        ref: b,
+        style: x ? {
+          "--uy-link-max-w": `${i}ch`
+        } : {},
+        className: m(),
+        isDisabled: o,
+        target: t ? "_blank" : e.target,
+        rel: t && !e.rel ? "noopener noreferrer" : e.rel,
+        ...f,
+        children: [
+          s,
+          t && /* @__PURE__ */ g(
+            k,
+            {
+              src: "ArrowSquareOutOutlined",
+              color: "currentColor",
+              width: "1.25em",
+              height: "1.25em",
+              role: "presentation",
+              className: v()
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+N.displayName = "Link";
 export {
-  a as link
+  N as RawLink,
+  L as link
 };

package/dist/esm/components/list-view/ListView.d.ts

@@ -0,0 +1,56 @@
+import { JSX, Ref } from 'react';
+import { ListBoxProps } from 'react-aria-components';
+export type ListViewProps<TItem extends object> = Omit<ListBoxProps<TItem>, 'layout' | 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'shouldSelectOnPressUp' | 'disallowEmptySelection' | 'escapeKeyBehavior' | 'className'> & {
+    /**
+     * Controls whether to enable virtualization for the list.
+     * @default false
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
+     */
+    className?: string;
+};
+type ListViewComponentType = {
+    <TItem extends object>(props: ListViewProps<TItem> & {
+        ref?: Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+/**
+ * The ListView component displays a vertically scrollable list of interactive items, allowing users to browse and navigate content in an organized manner.
+ *
+ * ListView supports both static and dynamic content rendering, sectioned layouts, keyboard navigation, disabled items, custom empty states, and virtualization for optimal performance with large datasets. Primarily designed for navigation-first mobile experiences like iOS mail apps and settings lists.
+ * @param {ListViewProps} props - The props for the ListView component, including all ListBox props from React Aria Components plus `enableVirtualization`
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView aria-label="My list">
+ *       <RawListViewItem id="1" href="/items/1">
+ *         <ListViewItemLabel>Item 1</ListViewItemLabel>
+ *       </RawListViewItem>
+ *       <RawListViewItem id="2" href="/items/2">
+ *         <ListViewItemLabel>Item 2</ListViewItemLabel>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Items can include an `href` prop to render as semantic links for navigation
+ * - Set `enableVirtualization` to `true` when working with large datasets (hundreds or thousands of items)
+ * - Combine with `ListViewSection` to organize items into labeled groups
+ * - Use `disabledKeys` to disable specific items by their ID
+ * - Provide `renderEmptyState` to display custom content when the list is empty
+ * - Always provide an accessible label using `aria-label` or `aria-labelledby`
+ * @see {@link ListViewProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
+ */
+declare const ListView: ListViewComponentType;
+export { ListView };

package/dist/esm/components/list-view/ListView.fixtures.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export declare const flatItems: {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}[];
+export declare const groupedItems: {
+    id: string;
+    label: string;
+    children: {
+        id: string;
+        label: string;
+        content: React.ReactNode;
+    }[];
+}[];
+export declare const virtualizedItems: {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}[];

package/dist/esm/components/list-view/ListView.js

@@ -0,0 +1,44 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { Virtualizer as m, ListLayout as p, ListBox as o } from "react-aria-components";
+const u = c({
+  base: [
+    "uy:pb-500 uy:data-[empty=true]:pb-0",
+    'uy:[&_[data-unity-slot="ListViewSection"]]:pb-300',
+    'uy:[&_[data-unity-slot="ListViewSection"]:last-child]:pb-0'
+  ]
+}), y = {
+  layout: p,
+  layoutOptions: {
+    estimatedRowHeight: 56,
+    estimatedHeadingHeight: 24,
+    gap: 0,
+    padding: 0
+  }
+}, w = (r, i) => {
+  const { children: a, enableVirtualization: n, className: d, ...e } = r, s = u({ className: d });
+  return n ? /* @__PURE__ */ t(m, { ...y, children: /* @__PURE__ */ t(
+    o,
+    {
+      ...e,
+      ref: i,
+      "data-dd-privacy": "show",
+      className: s,
+      children: a
+    }
+  ) }) : /* @__PURE__ */ t(
+    o,
+    {
+      ...e,
+      ref: i,
+      "data-dd-privacy": "show",
+      className: s,
+      children: a
+    }
+  );
+}, V = l(w);
+V.displayName = "ListView";
+export {
+  V as ListView
+};

package/dist/esm/components/list-view/parts/ListViewItemLabel.d.ts

@@ -0,0 +1,34 @@
+import { TextProps } from '../../text/Text.js';
+export type ListViewItemLabelProps = Omit<TextProps, 'variant' | 'color'>;
+/**
+ * The ListViewItemLabel component displays the primary text label for a list item, providing accessible identification and consistent typography.
+ * ListViewItemLabel applies action-style typography with automatic text truncation after three lines, ensuring labels remain scannable while accommodating varying content lengths. This component is required for proper accessibility within list items, as it helps screen readers identify each item's purpose.
+ * @param {ListViewItemLabelProps} props - The props for the ListViewItemLabel component, inheriting all Text props except `variant` and `color` (which are preset)
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView selectionMode="single">
+ *       <RawListViewItem>
+ *         <ListViewItemLabel>Employee Name</ListViewItemLabel>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - This component is required for accessibility - always include it in your RawListViewItem or provide `aria-label`/`textValue`
+ * - Text automatically truncates after 3 lines using `lineClamp` to maintain consistent item heights
+ * - Uses action-style typography (medium weight) to emphasize the label as the primary identifier
+ * - Content is automatically masked for privacy in Datadog recordings via `data-dd-privacy="mask"`
+ * - Inherits the disabled state styling from its parent RawListViewItem
+ * @see {@link ListViewItemLabelProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-942&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview-listviewitemlabel--docs unity-components.payfit.io}
+ */
+declare const ListViewItemLabel: import('react').ForwardRefExoticComponent<ListViewItemLabelProps & import('react').RefAttributes<HTMLElement>>;
+export { ListViewItemLabel };

package/dist/esm/components/list-view/parts/ListViewItemLabel.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Text as o } from "../../text/Text.js";
+const m = r(
+  ({ children: t, ...i }, a) => /* @__PURE__ */ e(
+    o,
+    {
+      ...i,
+      ref: a,
+      color: "inherit",
+      variant: "action",
+      "data-dd-privacy": "mask",
+      "data-unity-slot": "ListViewItemLabel",
+      lineClamp: 3,
+      children: t
+    }
+  )
+);
+m.displayName = "ListViewItemLabel";
+export {
+  m as ListViewItemLabel
+};

package/dist/esm/components/list-view/parts/ListViewItemText.d.ts

@@ -0,0 +1,33 @@
+import { TextProps } from '../../text/Text.js';
+export type ListViewItemTextProps = Omit<TextProps, 'variant' | 'color'>;
+/**
+ * The ListViewItemText component displays the primary text label for a list item, providing accessible identification and consistent typography.
+ * @param {ListViewItemTextProps} props - The props for the ListViewItemText component, inheriting all Text props except `variant` and `color` (which are preset)
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemText } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView>
+ *       <RawListViewItem>
+ *         <ListViewItemLabel>Employee Name</ListViewItemLabel>
+ *         <ListViewItemText>Employee Name</ListViewItemText>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - This component is used to display the text content of a list item
+ * - It inherits the disabled state styling from its parent RawListViewItem
+ * - It uses the bodySmall variant with the neutral.low color
+ * - It is automatically masked for privacy in Datadog recordings via the data-dd-privacy="mask" attribute
+ * @see {@link ListViewItemTextProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-942&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview-listviewitemtext--docs unity-components.payfit.io}
+ */
+declare const ListViewItemText: import('react').ForwardRefExoticComponent<ListViewItemTextProps & import('react').RefAttributes<HTMLElement>>;
+export { ListViewItemText };

package/dist/esm/components/list-view/parts/ListViewItemText.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { Text as i } from "../../text/Text.js";
+const m = a(
+  ({ children: t, ...e }, o) => /* @__PURE__ */ r(
+    i,
+    {
+      ...e,
+      ref: o,
+      color: "content.neutral.low",
+      variant: "bodySmall",
+      "data-dd-privacy": "mask",
+      "data-unity-slot": "ListViewItemText",
+      lineClamp: 3,
+      children: t
+    }
+  )
+);
+m.displayName = "ListViewItemText";
+export {
+  m as ListViewItemText
+};

package/dist/esm/components/list-view/parts/ListViewSection.d.ts

@@ -0,0 +1,14 @@
+import { JSX, Ref } from 'react';
+import { ListBoxSectionProps } from 'react-aria-components';
+export declare const listViewSection: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "", unknown, unknown, undefined>>;
+export type ListViewSectionProps<TItem extends object> = ListBoxSectionProps<TItem> & {
+    title: string;
+};
+type ListViewSectionComponentType = {
+    <TItem extends object>(props: ListViewSectionProps<TItem> & {
+        ref?: Ref<HTMLElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+declare const ListViewSection: ListViewSectionComponentType;
+export { ListViewSection };

package/dist/esm/components/list-view/parts/ListViewSection.js

@@ -0,0 +1,21 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import { ListBoxSection as a, Header as l, Collection as p } from "react-aria-components";
+const S = m({
+  // add the component styles
+  base: ""
+}), y = (i, o) => {
+  const { children: n, title: r, ...t } = i;
+  return /* @__PURE__ */ s(a, { ...t, ref: o, "data-unity-slot": "ListViewSection", children: [
+    /* @__PURE__ */ e(l, { className: "uy:typography-action uy:text-content-neutral-low uy:px-200 uy:mb-50", children: r }),
+    /* @__PURE__ */ e(p, { children: n, items: t.items })
+  ] });
+}, u = c(
+  y
+);
+u.displayName = "ListViewSection";
+export {
+  u as ListViewSection,
+  S as listViewSection
+};

package/dist/esm/components/list-view/parts/RawListViewItem.d.ts

@@ -0,0 +1,102 @@
+import { JSX, ReactNode, Ref } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+export declare const listViewItem: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            prefix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            suffix?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            prefix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            suffix?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    wrapper: string[];
+    prefix: string[];
+    content: string[];
+    suffix: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            prefix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            suffix?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    wrapper: string[];
+    prefix: string[];
+    content: string[];
+    suffix: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string[];
+    wrapper: string[];
+    prefix: string[];
+    content: string[];
+    suffix: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type RawListViewItemProps<TItem extends object> = Omit<ListBoxItemProps<TItem>, 'ref' | 'children' | 'className' | 'style'> & {
+    prefix?: JSX.Element;
+    suffix?: JSX.Element;
+    hideDisclosureIndicator?: boolean;
+    children: ReactNode;
+};
+type RawListViewItemComponentType = {
+    <TItem extends object>(props: RawListViewItemProps<TItem> & {
+        ref?: Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+/**
+ * The RawListViewItem component represents an individual item within a ListView, providing a flexible layout structure with prefix, content, and suffix slots.
+ *
+ * RawListViewItem handles interactive states (hover, focus, pressed, disabled) and automatically displays a disclosure indicator for navigation affordance unless explicitly hidden. When an `href` prop is provided, the item renders as a semantic link element. This component serves as the building block for all list item content within ListView, managing the layout and interaction patterns consistently.
+ * @param {RawListViewItemProps} props - The props for the RawListViewItem component, including all ListBoxItem props plus `prefix`, `suffix`, and `hideDisclosureIndicator`
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView aria-label="Users">
+ *       <RawListViewItem
+ *         href="/users/1"
+ *         prefix={<Icon src="UserFilled" />}
+ *         suffix={<Badge>New</Badge>}
+ *       >
+ *         <ListViewItemLabel>John Doe</ListViewItemLabel>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Always include a `ListViewItemLabel`, `aria-label`, or `textValue` prop for accessibility
+ * - Use the `prefix` prop for leading icons, avatars, or indicators
+ * - Use the `suffix` prop for trailing metadata, badges, or values
+ * - Set `hideDisclosureIndicator` to `true` when the item doesn't navigate to additional content
+ * - Set `isDisabled` to `true` to prevent interaction with the item
+ * - Provide an `href` prop to render the item as a semantic link for navigation
+ * - The component automatically manages hover, focus, and pressed states
+ * @see {@link RawListViewItemProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview-rawlistviewitem--docs unity-components.payfit.io}
+ */
+declare const RawListViewItem: RawListViewItemComponentType;
+export { RawListViewItem };

package/dist/esm/components/list-view/parts/RawListViewItem.js

@@ -0,0 +1,80 @@
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as g, useRef as w, useLayoutEffect as x } from "react";
+import { Icon as v } from "@payfit/unity-icons";
+import { uyTv as h } from "@payfit/unity-themes";
+import { ListBoxItem as I } from "react-aria-components";
+const L = h({
+  // add the component styles
+  slots: {
+    root: ["uy:group uy:focus-visible:outline-0"],
+    wrapper: [
+      "uy:p-200",
+      "uy:flex uy:gap-150",
+      "uy:transition-colors",
+      "uy:bg-surface-neutral",
+      "uy:border-b uy:border-b-solid uy:border-b-border-neutral",
+      // Hover when list is static
+      "uy:group-hover:bg-surface-neutral-hover uy:group-hover:cursor-pointer",
+      // Hover when list is interactive
+      "uy:group-data-[hovered=true]:bg-surface-neutral-hover uy:group-data-[hovered=true]:cursor-pointer",
+      // Press styles when list is interactive
+      "uy:group-data-[pressed=true]:bg-surface-neutral-pressed",
+      // Focus styles when list is interactive
+      "uy:group-data-[focus-visible=true]:bg-surface-neutral-focus uy:group-data-[focus-visible=true]:outline uy:group-data-[focus-visible=true]:-outline-offset-4 uy:group-data-[focus-visible=true]:outline-utility-focus-ring",
+      // disabled Styles when list is interactive
+      "uy:group-data-[disabled=true]:bg-surface-neutral-disabled uy:group-data-[disabled=true]:text-content-neutral-disabled uy:group-data-[disabled=true]:cursor-not-allowed",
+      // current page styles
+      'uy:group-data-[status="active"]:bg-surface-neutral-selected'
+    ],
+    prefix: ["uy:grow-0"],
+    content: ["uy:flex-1 uy:typography-body-small"],
+    suffix: ["uy:grow-0 uy:flex uy:gap-100"]
+  }
+}), V = (n, r) => {
+  const o = w(), { children: c, prefix: u, suffix: a, hideDisclosureIndicator: s, ...e } = n, {
+    root: d,
+    wrapper: f,
+    prefix: y,
+    suffix: p,
+    content: b
+  } = L(), m = !!a || !s;
+  return x(() => {
+    const t = o.current;
+    if (!t) return;
+    t.querySelector('[data-unity-slot="ListViewItemLabel"]') || !("aria-label" in e) && !("aria-labelledby" in e) && !("textValue" in e) && console.error(
+      "ListViewItem: Either a ListViewItemLabel component, an aria-label, aria-labelledby, or textValue prop is required for accessibility. Provide one to ensure screen reader users can identify the item."
+    );
+  }, [e, o]), /* @__PURE__ */ i(I, { ...e, className: d(), "data-dd-privacy": "mask", children: /* @__PURE__ */ l(
+    "div",
+    {
+      ref: (t) => {
+        o.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
+      },
+      "data-unity-slot": "ListViewItem",
+      className: f(),
+      children: [
+        u && /* @__PURE__ */ i("div", { "data-unity-slot": "ListViewItem.prefix", className: y(), children: u }),
+        /* @__PURE__ */ i("div", { "data-unity-slot": "ListViewItem.content", className: b(), children: c }),
+        m && /* @__PURE__ */ l("div", { "data-unity-slot": "ListViewItem.suffix", className: p(), children: [
+          a,
+          !s && /* @__PURE__ */ i(
+            v,
+            {
+              src: "CaretRightOutlined",
+              role: "presentation",
+              size: 20,
+              color: e.isDisabled ? "content.neutral.disabled" : "content.neutral.low"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}, R = g(
+  V
+);
+R.displayName = "RawListViewItem";
+export {
+  R as RawListViewItem,
+  L as listViewItem
+};