List

import { List } from "@lualtek/react-components";
 
export default () => {
  return (
    <List>
      <List.Li>Lorem ipsum dolor</List.Li>
      <List.Li>Sit amen consectur</List.Li>
      <List.Li>Adipiscing lorem</List.Li>
    </List>
  );
};

export type ListProps = {
  /**
   * Set the dimension of the items in the list. This affects also the marker size.
   * @default 'regular'
   */
  dimension?: "small" | "regular" | "big";
 
  /**
   * Set to show or hide the marker indicator beside each item in the list.
   * @default false
   */
  hideMarker?: boolean;
 
  /**
   * Set the gap between each list item
   */
  gap?: TokensTypes["space"];
 
  /**
   * Set the component to render as different element
   * @default 'ul'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};

export type ListItemProps = {
  /**
   * Set the marker style. You can use any icon from the iconography as marker
   * by passing its name.
   * @default 'circle'
   */
  marker?: IconProps["source"];
 
  /**
   * Set the color of the marker.
   */
  markerColor?: string;
};