@crossed/ui/lib/module/display/MenuList.js

A universal & performant styling library for React Native, Next.js & React

"use client";
import { jsx } from "react/jsx-runtime";
import { composeStyles, createStyles, withReactive } from "@crossed/styled";
import { withStaticProperties } from "@crossed/core";
import { forwardRef, memo } from "react";
import { ItemList } from "./ItemList";
const menuItemStyles = createStyles((t) => ({
  item: {
    base: {
      borderRadius: 12
    }
  },
  pressable: {
    ":hover": { backgroundColor: t.colors.background.hover },
    ":active": {
      backgroundColor: t.colors.background.active
    },
    "web": {
      base: { transition: "all 170ms ease" },
      ":focus-visible": {
        outlineColor: t.colors.border.brand
      }
    }
  }
}));
const MenuRoot = memo(
  forwardRef(({ ...props }, ref) => {
    return /* @__PURE__ */ jsx(ItemList, { ...props, ref });
  })
);
MenuRoot.displayName = "MenuList";
const MenuDivider = (props) => /* @__PURE__ */ jsx(ItemList.Divider, { ...props });
MenuDivider.displayName = "MenuList.Divider";
const MenuItem = withReactive(
  ({ style, children, pressable = true, ...props }) => {
    return /* @__PURE__ */ jsx(
      ItemList.Item,
      {
        ...props,
        pressable,
        style: composeStyles(
          pressable && menuItemStyles.pressable,
          menuItemStyles.item,
          style
        ),
        children
      }
    );
  }
);
MenuItem.displayName = "MenuList.Item";
const MenuLabel = ({ ...props }) => /* @__PURE__ */ jsx(ItemList.Label, { ...props });
MenuLabel.displayName = "MenuList.Label";
const MenuTitle = (props) => /* @__PURE__ */ jsx(ItemList.Title, { color: "secondary", ...props });
MenuTitle.displayName = "MenuList.Title";
const MenuList = withStaticProperties(MenuRoot, {
  Divider: MenuDivider,
  Item: MenuItem,
  Label: MenuLabel,
  Title: MenuTitle
});
MenuList.displayName = "MenuList";
export {
  MenuDivider,
  MenuItem,
  MenuLabel,
  MenuList,
  MenuTitle
};
//# sourceMappingURL=MenuList.js.map