@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/input/TanstackInput.js

@@ -0,0 +1,38 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as I } from "../form-field/TanstackFormField.context.js";
+import { Input as b } from "./Input.js";
+const h = p(
+  ({ onClearButtonPress: r, onBlur: i, onChange: n, isReadOnly: l, isDisabled: d, ...s }, u) => {
+    const e = f(), t = I(), m = e.state.meta.isTouched && !e.state.meta.isValid, o = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c(
+      b,
+      {
+        ...s,
+        ref: u,
+        id: t.inputId,
+        value: e.state.value ?? "",
+        onChange: (a) => {
+          e.handleChange(a.target.value), n?.(a);
+        },
+        onBlur: (a) => {
+          e.handleBlur(), i?.(a);
+        },
+        onClearButtonPress: () => {
+          e.setValue(""), r?.();
+        },
+        isReadOnly: l,
+        isDisabled: d,
+        isInvalid: m,
+        "aria-labelledby": t.labelId,
+        "aria-describedby": o.length > 0 ? o : void 0,
+        "aria-details": t.contextualLinkId
+      }
+    );
+  }
+);
+h.displayName = "TanstackInput";
+export {
+  h as TanstackInput
+};

package/dist/esm/components/label/Label.js

@@ -1,14 +1,14 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
 import { uyTv as b } from "@payfit/unity-themes";
-import { mergeProps as f } from "react-aria";
-import { useSlottedContext as g, InputContext as x, Label as N } from "react-aria-components";
-import { useIntl as h } from "react-intl";
-const q = b({
+import { mergeProps as g } from "react-aria";
+import { useSlottedContext as f, InputContext as h, Label as N } from "react-aria-components";
+import { useIntl as q } from "react-intl";
+const x = b({
   slots: {
-    base: "uy:typography-body-strong uy:text-content-form-enabled uy:flex uy:gap-25",
-    asterisk: "uy:text-content-danger",
-    optionalTag: "uy:typography-body"
+    base: "uy:typography-body-strong uy:text-content-form-enabled uy:leading-[1lh]",
+    asterisk: "uy:text-content-danger uy:inline-block uy:ml-25",
+    optionalTag: "uy:typography-body uy:inline-block uy:ml-25"
   },
   variants: {
     variant: {
@@ -25,21 +25,21 @@ const q = b({
   }
 }), v = c(
   ({ children: n, ...a }, l) => {
-    const e = h(), i = g(x), p = f(
+    const e = q(), i = f(h), d = g(
       { isRequired: i?.["aria-required"] },
       a
     ), {
       isRequired: t = !1,
       requiredVariant: o = "required",
-      ...d
-    } = p, { base: y, asterisk: m, optionalTag: u } = q();
+      ...y
+    } = d, { base: p, asterisk: m, optionalTag: u } = x();
     return /* @__PURE__ */ s(
       N,
       {
         "data-dd-privacy": "allow",
-        ...d,
+        ...y,
         ref: l,
-        className: y({ className: a.className }),
+        className: p({ className: a.className }),
         children: [
           n,
           o === "required" && t && /* @__PURE__ */ s("span", { className: m(), children: [

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

@@ -1,11 +1,11 @@
-import { jsxs as g, jsx as h } from "react/jsx-runtime";
+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 A } from "react-aria-components";
-import { useRouter as E } from "../../providers/router/RouterProvider.js";
-import { isExternalUrl as L } from "./utils.js";
-const N = D({
+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",
@@ -21,7 +21,7 @@ const N = D({
         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"
       }
     },
@@ -68,6 +68,13 @@ const N = D({
       class: {
         base: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
       }
+    },
+    {
+      size: "inherit",
+      variant: "inline",
+      class: {
+        base: "uy:text-(length:inherit)"
+      }
     }
   ],
   defaultVariants: {
@@ -76,58 +83,58 @@ const N = D({
     isDisabled: !1,
     size: "inherit"
   }
-}), R = w(
+}), N = w(
   ({
     href: a,
     children: s,
-    variant: l = "inline",
-    color: u = "primary",
+    variant: u = "inline",
+    color: l = "primary",
     isDisabled: o = !1,
     isExact: c = !1,
     isCurrent: y = void 0,
     isExternal: d,
-    maxCharactersTruncation: r,
-    size: b = "inherit",
+    maxCharactersTruncation: i,
+    size: p = "inherit",
     ...e
-  }, p) => {
-    const i = E(), t = d ?? L(a), n = !t && i ? i.isActive(a.toString(), c) : y, { base: m, icon: f } = N({
-      variant: l,
-      color: u,
+  }, 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: b,
-      isTruncated: !!r
-    }), v = !!r, x = i && {
+      size: p,
+      isTruncated: !!i
+    }), x = !!i, f = r && {
       ...n !== void 0 && {
         "data-current": n,
         "aria-current": n ? "page" : void 0
       }
     };
-    return /* @__PURE__ */ g(
-      A,
+    return /* @__PURE__ */ h(
+      z,
       {
         "data-dd-privacy": "allow",
         ...e,
         href: a,
-        ref: p,
-        style: v ? {
-          "--uy-link-max-w": `${r}ch`
+        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,
-        ...x,
+        ...f,
         children: [
           s,
-          t && /* @__PURE__ */ h(
+          t && /* @__PURE__ */ g(
             k,
             {
               src: "ArrowSquareOutOutlined",
               color: "currentColor",
-              width: "1.45em",
-              height: "1.45em",
+              width: "1.25em",
+              height: "1.25em",
               role: "presentation",
-              className: f()
+              className: v()
             }
           )
         ]
@@ -135,8 +142,8 @@ const N = D({
     );
   }
 );
-R.displayName = "Link";
+N.displayName = "Link";
 export {
-  R as RawLink,
-  N 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 };