Menu

import { Menu } from "@lualtek/react-components";
 
export default () => {
  return (
    <Menu>
      <Menu.Item>Item</Menu.Item>
      <Menu.ItemCheckbox>Checkable item</Menu.ItemCheckbox>
      <Menu.Separator />
      <Menu.Item>Item</Menu.Item>
    </Menu>
  );
};

export type MenuProps = HTMLAttributes<HTMLUListElement> & {
  /**
   * The items of the menu.
   */
  children: ReactNode;
 
  /**
   * Set a maximum height of the menu after which it will scroll.
   */
  maxHeight?: string;
};

export type MenuItemProps = {
  /**
   * Whether the menu item should have an icon
   */
  icon?: IconProps["source"];
 
  /**
   * Set the position of the icon. Used only when icon is defined.
   * @default 'start'
   */
  iconPosition?: "start" | "end";
 
  /**
   * Set the size of the menu item.
   * Font size and icon style will be adjusted to match the size.
   * @default 'regular'
   */
  dimension?: "small" | "regular";
 
  /**
   * Callback function to be called when the menu item is pressed.
   */
  onClick?: (
    event: React.MouseEvent<HTMLElement>,
    value: string | number
  ) => void;
 
  /**
   * Set disabled state. The item is not interactive and grayed out.
   * @default false
   */
  disabled?: boolean;
 
  /**
   * Add or remove the padding from the menu item.
   * This space is used to keep the content aligned across items with or without icons.
   * We suggest to not remove the padding if you have items with icons in the same menu to
   * keep a good readability.
   *
   * @default true
   */
  padding?: boolean;
 
  /**
   * Set item to gain focus automatically when the menu is opened.
   * This property is commonly used on the first item in the menu.
   */
  autoFocus?: boolean;
 
  /**
   * Add an element to decorate the menu item. This is useful for adding extra elements
   * and informations to the menu item.
   *
   * @note Don't use interactive elements (link, buttons, etc..) as decoration
   * if `Menu.Item` is rendered as ´<button>´ (default).
   */
  decoration?: ReactNode;
 
  /**
   * Assign a string value to the menu option. This is returned when the menu item is clicked.
   */
  value: string | number;
 
  /**
   * Set the sentiment color for the item
   */
  sentiment?: "positive" | "warning" | "danger";
 
  /**
   * Set the component to render as different element
   * @default 'button'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};

export type MenuItemCheckboxProps = MenuItemProps & {
  /**
   * Set the default checked state of the checkbox item
   */
  checked?: boolean;
};