@vibe/core 3.84.0 → 3.85.0

package/dist/components/next/List/List.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type ListProps } from "./List.types";
+declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLElement>>;
+export default List;

package/dist/components/next/List/List.types.d.ts

@@ -0,0 +1,47 @@
+import { type ReactElement, type AriaRole } from "react";
+import { type VibeComponentProps } from "../../../types";
+import { type BaseListSizes, type BaseListElement } from "../../BaseList";
+export type ListSize = BaseListSizes;
+export type ListElement = BaseListElement;
+export interface ListProps extends VibeComponentProps {
+    /**
+     * The HTML element to render as. Defaults to "ul".
+     */
+    as?: ListElement;
+    /**
+     * The child elements inside the list (typically ListItem components).
+     */
+    children?: ReactElement | ReactElement[];
+    /**
+     * The ARIA label describing the list. Required for accessibility when ariaDescribedBy is not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * The ID of an element that describes the list.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * The ARIA role of the list. Defaults to "listbox".
+     */
+    role?: AriaRole;
+    /**
+     * The size of the list items.
+     */
+    size?: ListSize;
+    /**
+     * The maximum height of the list container. Enables scrolling when content exceeds this height.
+     */
+    maxHeight?: number | string;
+    /**
+     * If true, the list will automatically focus on mount.
+     */
+    focusOnMount?: boolean;
+    /**
+     * Index of the item that should be focused initially. Defaults to 0.
+     */
+    defaultFocusIndex?: number;
+    /**
+     * Callback fired when the focused item changes.
+     */
+    onFocusChange?: (index: number, id?: string) => void;
+}

package/dist/components/next/List/ListItem/ListItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type ListItemProps } from "./ListItem.types";
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLElement>>;
+export default ListItem;

package/dist/components/next/List/ListItem/ListItem.types.d.ts

@@ -0,0 +1,44 @@
+import type React from "react";
+import { type AriaRole } from "react";
+import { type VibeComponentProps } from "../../../../types";
+import { type BaseItemDirection, type BaseItemData, type StartElement, type EndElement } from "../../../BaseItem";
+/**
+ * Re-export types from BaseItem for convenience
+ */
+export type ListItemDirection = BaseItemDirection;
+export type ListItemStartElement = StartElement;
+export type ListItemEndElement = EndElement;
+/**
+ * Props for the ListItem component.
+ * These are derived from BaseItemData to ensure consistency with the underlying BaseItem component.
+ */
+export interface ListItemProps extends Pick<BaseItemData, "label" | "disabled" | "startElement" | "endElement" | "tooltipProps">, VibeComponentProps {
+    /**
+     * The value of the list item (used for identification). Defaults to label if not provided.
+     */
+    value?: BaseItemData["value"];
+    /**
+     * If true, the list item is selected.
+     */
+    selected?: boolean;
+    /**
+     * If true, the list item is read-only and cannot be edited.
+     */
+    readOnly?: boolean;
+    /**
+     * Determines the position of the tooltip according to the direction.
+     */
+    dir?: ListItemDirection;
+    /**
+     * The ARIA role of the list item.
+     */
+    role?: AriaRole;
+    /**
+     * Callback fired when the list item is clicked.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Callback fired when the list item is hovered (mouseenter or focus).
+     */
+    onHover?: (event: React.MouseEvent | React.FocusEvent) => void;
+}

package/dist/components/next/List/ListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListItem } from "./ListItem";
+export * from "./ListItem.types";

package/dist/components/next/List/ListTitle/ListTitle.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type ListTitleProps } from "./ListTitle.types";
+declare const ListTitle: React.ForwardRefExoticComponent<ListTitleProps & React.RefAttributes<HTMLLIElement>>;
+export default ListTitle;

package/dist/components/next/List/ListTitle/ListTitle.types.d.ts

@@ -0,0 +1,16 @@
+import type { VibeComponentProps } from "../../../../types";
+import type { BaseListSizes } from "../../../BaseList/BaseList.types";
+export interface ListTitleProps extends VibeComponentProps {
+    /**
+     * The title text to display.
+     */
+    children?: string;
+    /**
+     * The size of the list title, inherited from the parent list context if not provided.
+     */
+    size?: BaseListSizes;
+    /**
+     * If true, the title will stick to the top when scrolling within a list.
+     */
+    sticky?: boolean;
+}

package/dist/components/next/List/ListTitle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListTitle } from "./ListTitle";
+export * from "./ListTitle.types";

package/dist/components/next/List/index.d.ts

@@ -0,0 +1,6 @@
+export { default as List } from "./List";
+export * from "./List.types";
+export { ListItem } from "./ListItem";
+export * from "./ListItem/ListItem.types";
+export { ListTitle } from "./ListTitle";
+export * from "./ListTitle/ListTitle.types";

package/dist/components/next/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./AttentionBox";
 export * from "./Dropdown";
 export * from "./DatePicker";
+export * from "./List";
 export * from "../../components/Modal";

package/dist/metadata.json

@@ -21275,6 +21275,427 @@
     "parentComponent": "next",
     "subComponents": []
   },
+  {
+    "filePath": "src/components/next/List/List.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as List",
+      "ListSize",
+      "ListElement",
+      "ListProps"
+    ],
+    "displayName": "List",
+    "description": "",
+    "props": {
+      "as": {
+        "defaultValue": {
+          "value": "ul"
+        },
+        "description": "The HTML element to render as. Defaults to \"ul\".",
+        "name": "as",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseListElement",
+          "value": [
+            {
+              "value": "\"div\""
+            },
+            {
+              "value": "\"nav\""
+            },
+            {
+              "value": "\"ul\""
+            },
+            {
+              "value": "\"ol\""
+            }
+          ]
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "The child elements inside the list (typically ListItem components).",
+        "name": "children",
+        "required": false,
+        "type": {
+          "name": "ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]"
+        }
+      },
+      "ariaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label describing the list. Required for accessibility when ariaDescribedBy is not provided.",
+        "name": "ariaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ariaDescribedBy": {
+        "defaultValue": null,
+        "description": "The ID of an element that describes the list.",
+        "name": "ariaDescribedBy",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "role": {
+        "defaultValue": {
+          "value": "listbox"
+        },
+        "description": "The ARIA role of the list. Defaults to \"listbox\".",
+        "name": "role",
+        "required": false,
+        "type": {
+          "name": "AriaRole"
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "small"
+        },
+        "description": "The size of the list items.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseItemSizes",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "maxHeight": {
+        "defaultValue": null,
+        "description": "The maximum height of the list container. Enables scrolling when content exceeds this height.",
+        "name": "maxHeight",
+        "required": false,
+        "type": {
+          "name": "string | number"
+        }
+      },
+      "focusOnMount": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the list will automatically focus on mount.",
+        "name": "focusOnMount",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "defaultFocusIndex": {
+        "defaultValue": null,
+        "description": "Index of the item that should be focused initially. Defaults to 0.",
+        "name": "defaultFocusIndex",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "onFocusChange": {
+        "defaultValue": null,
+        "description": "Callback fired when the focused item changes.",
+        "name": "onFocusChange",
+        "required": false,
+        "type": {
+          "name": "(index: number, id?: string) => void"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { List } from \"@vibe/core/next\"",
+    "parentComponent": "next",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/next/List/ListItem/ListItem.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ListItem",
+      "ListItemDirection",
+      "ListItemStartElement",
+      "ListItemEndElement",
+      "ListItemProps"
+    ],
+    "displayName": "ListItem",
+    "description": "",
+    "props": {
+      "value": {
+        "defaultValue": null,
+        "description": "The value of the list item (used for identification). Defaults to label if not provided.",
+        "name": "value",
+        "required": false,
+        "type": {
+          "name": "string | number"
+        }
+      },
+      "selected": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the list item is selected.",
+        "name": "selected",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "readOnly": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the list item is read-only and cannot be edited.",
+        "name": "readOnly",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "dir": {
+        "defaultValue": null,
+        "description": "Determines the position of the tooltip according to the direction.",
+        "name": "dir",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseItemDirection",
+          "value": [
+            {
+              "value": "\"ltr\""
+            },
+            {
+              "value": "\"rtl\""
+            },
+            {
+              "value": "\"auto\""
+            }
+          ]
+        }
+      },
+      "role": {
+        "defaultValue": null,
+        "description": "The ARIA role of the list item.",
+        "name": "role",
+        "required": false,
+        "type": {
+          "name": "AriaRole"
+        }
+      },
+      "onClick": {
+        "defaultValue": null,
+        "description": "Callback fired when the list item is clicked.",
+        "name": "onClick",
+        "required": false,
+        "type": {
+          "name": "(event: any) => void"
+        }
+      },
+      "onHover": {
+        "defaultValue": null,
+        "description": "Callback fired when the list item is hovered (mouseenter or focus).",
+        "name": "onHover",
+        "required": false,
+        "type": {
+          "name": "(event: any) => void"
+        }
+      },
+      "label": {
+        "defaultValue": null,
+        "description": "The primary text content of the list item.",
+        "name": "label",
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the list item is disabled.",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "startElement": {
+        "defaultValue": null,
+        "description": "The start element of the list item.",
+        "name": "startElement",
+        "required": false,
+        "type": {
+          "name": "StartElement"
+        }
+      },
+      "endElement": {
+        "defaultValue": null,
+        "description": "The end element of the list item.",
+        "name": "endElement",
+        "required": false,
+        "type": {
+          "name": "EndElement"
+        }
+      },
+      "tooltipProps": {
+        "defaultValue": null,
+        "description": "Props for displaying a tooltip on the list item.",
+        "name": "tooltipProps",
+        "required": false,
+        "type": {
+          "name": "Partial<TooltipProps>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { ListItem } from \"@vibe/core/next\"",
+    "subComponents": []
+  },
+  {
+    "filePath": "src/components/next/List/ListTitle/ListTitle.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as ListTitle",
+      "ListTitleProps"
+    ],
+    "displayName": "ListTitle",
+    "description": "",
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "The title text to display.",
+        "name": "children",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "size": {
+        "defaultValue": null,
+        "description": "The size of the list title, inherited from the parent list context if not provided.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "BaseItemSizes",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "sticky": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, the title will stick to the top when scrolling within a list.",
+        "name": "sticky",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { ListTitle } from \"@vibe/core/next\"",
+    "subComponents": []
+  },
   {
     "filePath": "src/components/Modal/footers/ModalFooter/ModalFooter.tsx",
     "aggregator": "next",

package/dist/mocked_classnames/components/next/List/List.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type ListProps } from "./List.types";
+declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLElement>>;
+export default List;

package/dist/mocked_classnames/components/next/List/List.types.d.ts

@@ -0,0 +1,47 @@
+import { type ReactElement, type AriaRole } from "react";
+import { type VibeComponentProps } from "../../../types";
+import { type BaseListSizes, type BaseListElement } from "../../BaseList";
+export type ListSize = BaseListSizes;
+export type ListElement = BaseListElement;
+export interface ListProps extends VibeComponentProps {
+    /**
+     * The HTML element to render as. Defaults to "ul".
+     */
+    as?: ListElement;
+    /**
+     * The child elements inside the list (typically ListItem components).
+     */
+    children?: ReactElement | ReactElement[];
+    /**
+     * The ARIA label describing the list. Required for accessibility when ariaDescribedBy is not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * The ID of an element that describes the list.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * The ARIA role of the list. Defaults to "listbox".
+     */
+    role?: AriaRole;
+    /**
+     * The size of the list items.
+     */
+    size?: ListSize;
+    /**
+     * The maximum height of the list container. Enables scrolling when content exceeds this height.
+     */
+    maxHeight?: number | string;
+    /**
+     * If true, the list will automatically focus on mount.
+     */
+    focusOnMount?: boolean;
+    /**
+     * Index of the item that should be focused initially. Defaults to 0.
+     */
+    defaultFocusIndex?: number;
+    /**
+     * Callback fired when the focused item changes.
+     */
+    onFocusChange?: (index: number, id?: string) => void;
+}

package/dist/mocked_classnames/components/next/List/ListItem/ListItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type ListItemProps } from "./ListItem.types";
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLElement>>;
+export default ListItem;

package/dist/mocked_classnames/components/next/List/ListItem/ListItem.types.d.ts

@@ -0,0 +1,44 @@
+import type React from "react";
+import { type AriaRole } from "react";
+import { type VibeComponentProps } from "../../../../types";
+import { type BaseItemDirection, type BaseItemData, type StartElement, type EndElement } from "../../../BaseItem";
+/**
+ * Re-export types from BaseItem for convenience
+ */
+export type ListItemDirection = BaseItemDirection;
+export type ListItemStartElement = StartElement;
+export type ListItemEndElement = EndElement;
+/**
+ * Props for the ListItem component.
+ * These are derived from BaseItemData to ensure consistency with the underlying BaseItem component.
+ */
+export interface ListItemProps extends Pick<BaseItemData, "label" | "disabled" | "startElement" | "endElement" | "tooltipProps">, VibeComponentProps {
+    /**
+     * The value of the list item (used for identification). Defaults to label if not provided.
+     */
+    value?: BaseItemData["value"];
+    /**
+     * If true, the list item is selected.
+     */
+    selected?: boolean;
+    /**
+     * If true, the list item is read-only and cannot be edited.
+     */
+    readOnly?: boolean;
+    /**
+     * Determines the position of the tooltip according to the direction.
+     */
+    dir?: ListItemDirection;
+    /**
+     * The ARIA role of the list item.
+     */
+    role?: AriaRole;
+    /**
+     * Callback fired when the list item is clicked.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Callback fired when the list item is hovered (mouseenter or focus).
+     */
+    onHover?: (event: React.MouseEvent | React.FocusEvent) => void;
+}

package/dist/mocked_classnames/components/next/List/ListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListItem } from "./ListItem";
+export * from "./ListItem.types";