@payfit/unity-components 2.0.0 → 2.2.0

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

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
 import { uyTv as h } from "@payfit/unity-themes";
 import { Input as I } from "react-aria-components";
@@ -8,12 +8,12 @@ import { Icon as M } from "../icon/Icon.js";
 import { Spinner as C } from "../spinner/Spinner.js";
 const O = h({
   slots: {
-    base: "uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
-    prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-75 uy:active:border-border-form-active",
-    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:max-w-full uy:justify-between",
+    base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+    prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
     input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
     state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0",
-    suffix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75 uy:active:border-border-form-active"
+    suffix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
   },
   variants: {
     isInvalid: {
@@ -62,17 +62,17 @@ const O = h({
   ]
 }), S = v(
   ({
-    type: s = "text",
-    prefix: d,
+    type: i = "text",
+    prefix: s,
     suffix: l,
-    isInvalid: i,
-    isLoading: r,
-    isDisabled: o,
-    isReadOnly: u,
-    onClearButtonPress: f,
-    ...t
-  }, y) => {
-    const a = N(), {
+    isInvalid: r,
+    isLoading: o,
+    isDisabled: u,
+    isReadOnly: t,
+    onClearButtonPress: y,
+    ...a
+  }, f) => {
+    const n = N(), {
       base: b,
       prefix: m,
       inputWrapper: c,
@@ -80,44 +80,45 @@ const O = h({
       state: x,
       suffix: g
     } = O({
-      isInvalid: !!i,
-      isReadOnly: !!u,
-      isDisabled: !!o
-    }), w = t.value && !r && !u && !o;
-    return delete t.isRequired, /* @__PURE__ */ n("div", { className: b(), children: [
-      d ? /* @__PURE__ */ e("span", { className: m(), children: d }) : null,
-      /* @__PURE__ */ n("div", { className: c(), children: [
+      isInvalid: !!r,
+      isReadOnly: !!t,
+      isDisabled: !!u
+    }), w = a.value && !o && !t && !u;
+    return delete a.isRequired, /* @__PURE__ */ d("div", { className: b(), children: [
+      s ? /* @__PURE__ */ e("span", { className: m(), children: s }) : null,
+      /* @__PURE__ */ d("div", { className: c(), children: [
         /* @__PURE__ */ e(
           I,
           {
             "data-dd-privacy": "mask",
-            ...t,
-            ref: y,
-            type: s,
+            ...a,
+            ref: f,
+            type: i,
             className: p(),
-            "aria-busy": r,
-            readOnly: u,
-            disabled: o
+            "aria-busy": o,
+            "aria-invalid": r,
+            readOnly: t,
+            disabled: u
           }
         ),
-        /* @__PURE__ */ n("div", { className: x(), children: [
-          r && /* @__PURE__ */ e(
+        /* @__PURE__ */ d("div", { className: x(), children: [
+          o && /* @__PURE__ */ e(
             C,
             {
               color: "inherit",
               size: "small",
-              label: a.formatMessage({
+              label: n.formatMessage({
                 id: "unity:component:common:loading:label",
                 defaultMessage: "Loading..."
               })
             }
           ),
-          i && /* @__PURE__ */ e(
+          r && /* @__PURE__ */ e(
             M,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
-              alt: a.formatMessage({
+              alt: n.formatMessage({
                 id: "unity:component:form-field:form-input:error:alt",
                 defaultMessage: "Error"
               })
@@ -126,14 +127,14 @@ const O = h({
           w && /* @__PURE__ */ e(
             W,
             {
-              title: a.formatMessage({
+              title: n.formatMessage({
                 id: "unity:component:common:clear:title",
                 defaultMessage: "Clear"
               }),
               color: "content.neutral.low",
               icon: "CloseOutlined",
               onPress: () => {
-                f?.();
+                y?.();
               }
             }
           )

package/dist/esm/components/input/TanstackInput.d.ts

@@ -0,0 +1,22 @@
+import { InputProps } from './Input.js';
+export type TanstackInputProps = Omit<InputProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackInput` is a controlled input wired to the TanStack Form field context.
+ * It is based on the Unity `Input` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="name">
+ *         {() => <TanstackInput placeholder="Your name" />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackInput: import('react').ForwardRefExoticComponent<TanstackInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackInput };

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
+};