@ttoss/components 1.31.0 → 1.31.2

package/README.md

@@ -20,6 +20,31 @@ pnpm add @ttoss/components @ttoss/ui @emotion/react @ttoss/react-hooks
 
 You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/components).
 
+### List
+
+The `List` component is a React component that renders an unordered list `(<ul>)` and accepts
+`ListItem` as its children. Each ListItem can contain any React content, including other components.
+
+```tsx
+import React from 'react';
+import { List, ListItem } from '@ttoss/components/List';
+
+const MyComponent = () => (
+  <List>
+    <ListItem>Item 1</ListItem>
+    <ListItem>Item 2</ListItem>
+    <ListItem>Item 3</ListItem>
+    <ListItem>
+      <CustomComponent />
+    </ListItem>
+  </List>
+);
+```
+
+In this example, `List` is used to render an `<ul>` list with four items. The last item contains a custom React component (CustomComponent), demonstrating that ListItem can receive any React content as its children.
+
+This is a basic example of how to use the `List` component with `ListItem`. You can customize the content and styles as needed to fit your project requirements.
+
 ### Markdown
 
 Markdown uses [react-markdown](https://remarkjs.github.io/react-markdown/) under the hood, so the props are the same. You can update the elements as you want. Ex:

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface ListProps extends React.HTMLProps<HTMLUListElement> {
+    children: React.ReactNode;
+}
+declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+
+interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
+    children: React.ReactNode;
+}
+declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+
+export { List, ListItem, type ListItemProps, type ListProps };

package/dist/esm/components/List/index.js

@@ -0,0 +1,33 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/components/List/List.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var List = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */jsx("ul", {
+    ...props,
+    ref,
+    children
+  });
+});
+List.displayName = "List";
+
+// src/components/List/ListItem.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ListItem = /*#__PURE__*/React2.forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return /* @__PURE__ */jsx2("li", {
+    ...rest,
+    ref,
+    children
+  });
+});
+ListItem.displayName = "ListItem";
+export { List, ListItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.31.0",
+  "version": "1.31.2",
   "description": "React components for ttoss ecosystem.",
   "author": "ttoss",
   "contributors": [
@@ -17,6 +17,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js"
     },
+    "./list": {
+      "types": "./dist/List.d.ts",
+      "import": "./dist/esm/List.js"
+    },
     "./table": {
       "types": "./dist/components/Table.d.ts",
       "import": "./dist/esm/components/Table.js"
@@ -50,19 +54,16 @@
     "@types/react": "^18.2.58",
     "jest": "^29.7.0",
     "tsup": "^8.0.2",
-    "@ttoss/react-hooks": "^1.25.3",
     "@ttoss/config": "^1.31.5",
     "@ttoss/react-icons": "^0.3.1",
     "@ttoss/test-utils": "^2.1.1",
+    "@ttoss/react-hooks": "^1.25.3",
     "@ttoss/ui": "^4.1.4"
   },
   "keywords": [
     "React",
     "components"
   ],
-  "engines": {
-    "node": ">=16"
-  },
   "publishConfig": {
     "access": "public",
     "provenance": true

package/src/components/List/List.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface ListProps extends React.HTMLProps<HTMLUListElement> {
+  children: React.ReactNode;
+}
+
+export const List = React.forwardRef<HTMLUListElement, ListProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <ul {...props} ref={ref}>
+        {children}
+      </ul>
+    );
+  }
+);
+
+List.displayName = 'List';

package/src/components/List/ListItem.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
+  children: React.ReactNode;
+}
+
+export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    return (
+      <li {...rest} ref={ref}>
+        {children}
+      </li>
+    );
+  }
+);
+
+ListItem.displayName = 'ListItem';

package/src/components/List/index.ts

@@ -0,0 +1,2 @@
+export * from './List';
+export * from './ListItem';