@payfit/unity-components 2.46.13 → 2.46.14

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,45 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { ListBox as o } from "react-aria-components/ListBox";
+import { Virtualizer as p, ListLayout as c } from "react-aria-components/Virtualizer";
+const u = l({
+  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: c,
+  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(p, { ...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 = m(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/ListBox';
+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,23 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import { Collection as a } from "react-aria-components/Collection";
+import { Header as l } from "react-aria-components/Header";
+import { ListBoxSection as p } from "react-aria-components/ListBox";
+const V = m({
+  // add the component styles
+  base: ""
+}), y = (o, e) => {
+  const { children: r, title: n, ...t } = o;
+  return /* @__PURE__ */ s(p, { ...t, ref: e, "data-unity-slot": "ListViewSection", children: [
+    /* @__PURE__ */ i(l, { className: "uy:typography-action uy:text-content-neutral-low uy:px-200 uy:mb-50", children: n }),
+    /* @__PURE__ */ i(a, { children: r, items: t.items })
+  ] });
+}, f = c(
+  y
+);
+f.displayName = "ListViewSection";
+export {
+  f as ListViewSection,
+  V 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/ListBox';
+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;
+            suffix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            prefix?: import('tailwind-merge').ClassNameValue;
+            suffix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: 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;
+            suffix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: 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,81 @@
+import { jsx as u, 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/ListBox";
+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:text-content-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 i = w(), { children: c, prefix: o, suffix: a, hideDisclosureIndicator: s, ...e } = n, {
+    root: d,
+    wrapper: f,
+    prefix: y,
+    suffix: p,
+    content: b
+  } = L(), m = !!a || !s;
+  return x(() => {
+    const t = i.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, i]), /* @__PURE__ */ u(I, { ...e, className: d(), "data-dd-privacy": "mask", children: /* @__PURE__ */ l(
+    "div",
+    {
+      ref: (t) => {
+        i.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
+      },
+      "data-unity-slot": "ListViewItem",
+      className: f(),
+      children: [
+        o && /* @__PURE__ */ u("div", { "data-unity-slot": "ListViewItem.prefix", className: y(), children: o }),
+        /* @__PURE__ */ u("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__ */ u(
+            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
+};

package/dist/esm/components/menu/Menu.d.ts

@@ -0,0 +1,11 @@
+import { MenuTriggerProps } from 'react-aria-components/Menu';
+import { PopoverProps } from 'react-aria-components/Popover';
+type MenuProps = Omit<MenuTriggerProps, 'className' | 'style'> & {
+    placement?: PopoverProps['placement'];
+    triggerRef?: PopoverProps['triggerRef'];
+};
+export declare function Menu({ defaultOpen, children, triggerRef, placement, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/Menu.js

@@ -0,0 +1,31 @@
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import y from "react";
+import { MenuTrigger as l, Popover as s } from "react-aria-components/Menu";
+function m({
+  defaultOpen: u,
+  children: o,
+  triggerRef: t,
+  placement: n,
+  ...a
+}) {
+  const [r, e] = y.Children.toArray(o);
+  if (!r || !e)
+    throw new Error("Menu must have a trigger and a menu content");
+  return /* @__PURE__ */ d(l, { defaultOpen: u, ...a, children: [
+    r,
+    /* @__PURE__ */ i(
+      s,
+      {
+        triggerRef: t,
+        placement: n,
+        className: "uy:flex uy:flex-col uy:justify-end uy:items-start uy:p-100 uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300",
+        "data-dd-privacy": "allow",
+        children: e
+      }
+    )
+  ] });
+}
+m.displayName = "Menu";
+export {
+  m as Menu
+};

package/dist/esm/components/menu/parts/MenuContent.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { PopoverProps } from 'react-aria-components/Popover';
+interface MenuContent {
+    /**
+     * @deprecated move it to the root Menu component
+     */
+    placement?: PopoverProps['placement'];
+    width?: number;
+    /**
+     * @deprecated move it to the root Menu component
+     */
+    triggerRef?: PopoverProps['triggerRef'];
+}
+export declare function MenuContent({ children, placement, width, triggerRef, }: PropsWithChildren<MenuContent>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuContent {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/parts/MenuContent.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+import { uyTv as u } from "@payfit/unity-themes";
+import { Menu as o } from "react-aria-components/Menu";
+const m = u({
+  base: [
+    "uy:outline-none",
+    "uy:w-(--uy-menu-content-width) uy:min-w-(--uy-menu-content-min-width)"
+  ]
+});
+function i({
+  children: t,
+  placement: r,
+  width: n,
+  triggerRef: c
+}) {
+  return /* @__PURE__ */ e(
+    o,
+    {
+      className: m(),
+      style: {
+        "--uy-menu-content-width": n ? `${n}px` : "auto",
+        "--uy-menu-content-min-width": n ? "" : "calc(var(--uy-spacing) * 40)"
+      },
+      children: t
+    }
+  );
+}
+i.displayName = "MenuContent";
+export {
+  i as MenuContent
+};

package/dist/esm/components/menu/parts/MenuHeader.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface MenuHeaderProps {
+    className?: string;
+}
+export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuHeader {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/parts/MenuHeader.js

@@ -0,0 +1,17 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Header as a } from "react-aria-components/Header";
+import { MenuSection as n } from "react-aria-components/Menu";
+import { MenuSeparator as t } from "./MenuSeparator.js";
+function i({
+  children: r,
+  className: o
+}) {
+  return /* @__PURE__ */ m(n, { children: [
+    /* @__PURE__ */ e(a, { className: `uy:p-100 ${o}`, children: r }),
+    /* @__PURE__ */ e(t, {})
+  ] });
+}
+i.displayName = "MenuHeader";
+export {
+  i as MenuHeader
+};

package/dist/esm/components/menu/parts/MenuSection.d.ts

@@ -0,0 +1,82 @@
+import { MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components/Menu';
+interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProps<TItemType> {
+    /**
+     * The label rendered above the section's items.
+     * Always present in the DOM for accessibility; use `isTitleHidden` to hide it visually.
+     */
+    title: string;
+    /**
+     * When `true`, hides the section title visually while keeping it accessible to screen readers.
+     * @default false
+     */
+    isTitleHidden?: boolean;
+    className?: string;
+}
+/**
+ * `MenuSection` groups related menu items under a labelled heading inside a `MenuContent` panel.
+ * The section title provides both visual context and an accessible label for assistive technologies.
+ * Use multiple `MenuSection` blocks separated by `MenuSeparator` to divide a menu into distinct
+ * named categories.
+ *
+ * For collection-based rendering pass an `items` array and a render function as children.
+ * For static content pass `RawMenuItem` elements directly as children.
+ * @template TItemType - The shape of each item object when using collection-based rendering via the `items` prop.
+ * @param {MenuSectionProps<TItemType>} props - The component props
+ * @example
+ * ```tsx
+ * import { Menu, MenuContent, MenuSection, MenuTrigger, RawMenuItem } from '@payfit/unity-components'
+ *
+ * function ActionsMenu() {
+ *   return (
+ *     <Menu>
+ *       <MenuTrigger>Actions</MenuTrigger>
+ *       <MenuContent>
+ *         <MenuSection title="File">
+ *           <RawMenuItem>New</RawMenuItem>
+ *           <RawMenuItem>Open</RawMenuItem>
+ *         </MenuSection>
+ *         <MenuSeparator />
+ *         <MenuSection title="Edit">
+ *           <RawMenuItem>Cut</RawMenuItem>
+ *           <RawMenuItem>Copy</RawMenuItem>
+ *         </MenuSection>
+ *       </MenuContent>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Collection-based rendering with items prop
+ * import { Menu, MenuContent, MenuSection, MenuTrigger, RawMenuItem } from '@payfit/unity-components'
+ *
+ * const items = [
+ *   { id: '1', label: 'New' },
+ *   { id: '2', label: 'Open' },
+ * ]
+ *
+ * function ActionsMenu() {
+ *   return (
+ *     <Menu>
+ *       <MenuTrigger>Actions</MenuTrigger>
+ *       <MenuContent>
+ *         <MenuSection title="File" items={items}>
+ *           {(item) => <RawMenuItem key={item.id}>{item.label}</RawMenuItem>}
+ *         </MenuSection>
+ *       </MenuContent>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The `title` is always rendered in the DOM. Set `isTitleHidden` to `true` to visually hide it
+ *   while preserving screen reader accessibility — useful when the grouping is implied by context
+ * - Wrap multiple sections in a `MenuContent` and separate them with `MenuSeparator` to create
+ *   visually distinct groups within a single menu
+ * @see {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/menu/parts/MenuSection.tsx Source code on GitHub}
+ */
+export declare function MenuSection<TItemType extends object>({ children, items, className, title, isTitleHidden, ...rest }: MenuSectionProps<TItemType>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSection {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/menu/parts/MenuSection.js

@@ -0,0 +1,44 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { uyTv as d } from "@payfit/unity-themes";
+import { Collection as c } from "react-aria-components/Collection";
+import { Header as m } from "react-aria-components/Header";
+import { MenuSection as y } from "react-aria-components/Menu";
+const p = d({
+  slots: {
+    base: [""],
+    header: [
+      "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral-enabled"
+    ]
+  },
+  variants: {
+    isTitleHidden: {
+      true: {
+        header: "uy:sr-only"
+      },
+      false: {
+        header: ""
+      }
+    }
+  },
+  defaultVariants: {
+    isTitleHidden: !1
+  }
+});
+function f({
+  children: t,
+  items: n,
+  className: o,
+  title: r,
+  isTitleHidden: a,
+  ...i
+}) {
+  const { base: s, header: l } = p({ isTitleHidden: a });
+  return /* @__PURE__ */ u(y, { ...i, className: s({ className: o }), children: [
+    /* @__PURE__ */ e(m, { className: l(), children: r }),
+    /* @__PURE__ */ e(c, { items: n, children: t })
+  ] });
+}
+f.displayName = "MenuSection";
+export {
+  f as MenuSection
+};

package/dist/esm/components/menu/parts/MenuSeparator.d.ts

@@ -0,0 +1,4 @@
+export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSeparator {
+    var displayName: string;
+}